/* ============================================================
   Biomorph Systems — components.css
   Norn Emissary component layer
   Nav · Buttons · Hero · Cards · Forms · Footer
   ============================================================ */

/* ------------------------------------------------------------
   Navigation — the cranial crest
   ------------------------------------------------------------ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--nav-height);
  background: rgba(18, 6, 28, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--color-lilac-line);
  transition: all var(--transition-normal);
}

/* Feathered highlight running along the lower edge */
.nav::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--color-lilac) 25%, var(--color-lilac-soft) 50%, var(--color-lilac) 75%, transparent 100%);
  pointer-events: none;
}

.nav.is-scrolled {
  background: rgba(10, 3, 17, 0.98);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
  transition: filter var(--transition-fast), transform var(--transition-fast);
}

.nav__logo:hover {
  filter: drop-shadow(0 0 12px rgba(155, 93, 229, 0.6));
  transform: translateY(-1px);
}

.nav__logo-img { height: 38px; width: auto; max-width: 210px; }

.nav__telemetry {
  display: none;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-text-secondary);
  letter-spacing: 0.1em;
  padding: 5px 12px;
  border-radius: var(--radius-xs);
  background: rgba(155, 93, 229, 0.08);
  border: 1px solid var(--color-lilac-faint);
}

@media (min-width: 1024px) { .nav__telemetry { display: inline-flex; } }

.nav__telemetry-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-warp);
  box-shadow: 0 0 9px var(--color-warp);
  animation: pulseDot 2.4s infinite ease-in-out;
}

.nav__links { display: none; align-items: center; gap: var(--space-8); }
@media (min-width: 768px) { .nav__links { display: flex; } }

.nav__link {
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color var(--transition-fast);
  position: relative;
  padding-block: var(--space-2);
}

.nav__link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--color-lilac);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-fast);
}

.nav__link:hover,
.nav__link.is-active { color: var(--color-bone); }

.nav__link:hover::after,
.nav__link.is-active::after { transform: scaleX(1); }

/* Nav CTA — the synapse */
.nav__link--cta {
  background: var(--color-synapse);
  color: #fff !important;
  padding: 10px 22px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.1em;
  box-shadow: 0 0 18px rgba(255, 0, 127, 0.4);
  transition: all var(--transition-fast) !important;
}

.nav__link--cta::after { display: none; }

.nav__link--cta:hover {
  background: var(--color-synapse-hot);
  box-shadow: var(--glow-synapse-lg);
  transform: translateY(-1px);
}

/* Hamburger */
.nav__hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: var(--space-1);
  background: rgba(155, 93, 229, 0.08);
  border: 1px solid var(--color-lilac-line);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.nav__hamburger:hover {
  border-color: var(--color-synapse);
  box-shadow: 0 0 14px rgba(255, 0, 127, 0.35);
}

@media (min-width: 768px) { .nav__hamburger { display: none; } }

.nav__hamburger-line {
  display: block;
  width: 20px;
  height: 2px;
  background-color: var(--color-bone);
  transition: transform var(--transition-fast), opacity var(--transition-fast);
  transform-origin: center;
}

.nav__hamburger[aria-expanded="true"] .nav__hamburger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); background-color: var(--color-lilac-soft); }
.nav__hamburger[aria-expanded="true"] .nav__hamburger-line:nth-child(2) { opacity: 0; }
.nav__hamburger[aria-expanded="true"] .nav__hamburger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); background-color: var(--color-lilac-soft); }

/* Mobile menu */
.nav__mobile {
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  background: rgba(18, 6, 28, 0.99);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--color-lilac-line);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.7);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transform: translateY(-12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal), transform var(--transition-normal);
  z-index: 99;
}

.nav__mobile.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }

.nav__mobile-link {
  font-family: var(--font-display);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: all var(--transition-fast);
}

.nav__mobile-link:hover,
.nav__mobile-link.is-active {
  color: var(--color-bone);
  background: rgba(155, 93, 229, 0.12);
  border-color: var(--color-lilac-line);
}

.nav__mobile-link--cta {
  margin-top: var(--space-3);
  background: var(--color-synapse);
  color: #fff !important;
  font-weight: var(--font-weight-bold);
  text-align: center;
  box-shadow: 0 0 22px rgba(255, 0, 127, 0.45);
}

.nav__mobile-link--cta:hover {
  background: var(--color-synapse-hot);
  border-color: transparent;
}

.nav-offset { padding-top: var(--nav-height); }

/* ------------------------------------------------------------
   Buttons
   ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 13px 28px;
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
  user-select: none;
  position: relative;
  overflow: hidden;
}

.btn:active { transform: scale(0.98); }

.btn:focus-visible {
  outline: 2px solid var(--color-warp);
  outline-offset: 3px;
}

/* PRIMARY CTA — synapse glow (the only magenta fill on the site) */
.btn--synapse,
.btn--cyan,
.btn--primary {
  background: var(--color-synapse);
  color: #fff;
  border-color: var(--color-synapse);
  box-shadow: 0 0 22px rgba(255, 0, 127, 0.5);
}

.btn--synapse::after,
.btn--cyan::after,
.btn--primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
}

.btn--synapse:hover,
.btn--cyan:hover,
.btn--primary:hover {
  background: var(--color-synapse-hot);
  border-color: var(--color-synapse-hot);
  box-shadow: var(--glow-synapse-lg);
  transform: translateY(-2px);
}

.btn--synapse:hover::after,
.btn--cyan:hover::after,
.btn--primary:hover::after { left: 120%; }

@media (prefers-reduced-motion: no-preference) {
  .btn--synapse.btn--lg,
  .btn--cyan.btn--lg { animation: synapsePulse 2.8s ease-in-out infinite; }
  .btn--synapse.btn--lg:hover,
  .btn--cyan.btn--lg:hover { animation: none; }
}

/* Secondary — lilac plate outline, adapts to light/dark context */
.btn--outline-plate,
.btn--outline-cyan {
  background: transparent;
  color: var(--color-text-primary);
  border-color: var(--color-lilac);
}

.btn--outline-plate:hover,
.btn--outline-cyan:hover {
  background: var(--color-synapse);
  border-color: var(--color-synapse);
  color: #fff;
  box-shadow: var(--glow-synapse);
  transform: translateY(-2px);
}

/* Secondary on dark */
.btn--outline-light {
  background: rgba(155, 93, 229, 0.08);
  color: var(--color-bone);
  border-color: var(--color-lilac);
}

.btn--outline-light:hover {
  border-color: var(--color-synapse);
  background: rgba(255, 0, 127, 0.12);
  color: #fff;
  box-shadow: var(--glow-synapse);
  transform: translateY(-2px);
}

/* Heavy functional — talons */
.btn--talon {
  background: var(--gradient-talon-diag);
  color: var(--color-bone);
  border-color: var(--color-crimson);
  box-shadow: 0 6px 18px rgba(154, 3, 30, 0.35);
}

.btn--talon:hover {
  border-color: var(--color-synapse);
  box-shadow: 0 8px 26px rgba(154, 3, 30, 0.6), 0 0 0 1px var(--color-synapse);
  transform: translateY(-2px);
}

.btn--lg { padding: 18px 38px; font-size: var(--font-size-base); }
.btn--sm { padding: 9px 18px; font-size: var(--font-size-xs); }
.btn--full { width: 100%; }

/* Copy button */
.btn--icon {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  letter-spacing: 0.06em;
  padding: 9px 14px;
  border-radius: var(--radius-xs);
  background: rgba(155, 93, 229, 0.1);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-lilac-line);
}

.btn--icon:hover {
  background: rgba(155, 93, 229, 0.22);
  color: var(--color-bone);
  border-color: var(--color-lilac-soft);
}

/* Copied = status indicator → warp */
.btn--icon.is-copied {
  background: rgba(0, 255, 204, 0.12);
  color: var(--color-warp);
  border-color: var(--color-warp);
  box-shadow: 0 0 14px var(--color-warp-glow);
}

/* ------------------------------------------------------------
   Hero — towering cranial crest
   ------------------------------------------------------------ */
.hero {
  min-height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding-block: var(--space-20) calc(var(--space-20) + 40px);
  background:
    radial-gradient(ellipse 60% 45% at 50% 100%, rgba(155, 93, 229, 0.28), transparent 70%),
    linear-gradient(180deg, #0a0311 0%, var(--color-carapace) 45%, var(--color-carapace-2) 100%);
  /* sharp armor-plate chevron on the lower edge */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 44px), 50% 100%, 0 calc(100% - 44px));
}

/* Feathered crest plates radiating from below */
.hero::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -30%;
  width: 150%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: repeating-conic-gradient(from -70deg at 50% 50%,
      rgba(155, 93, 229, 0.3) 0deg 0.35deg,
      transparent 0.35deg 5deg);
  -webkit-mask-image: radial-gradient(circle, #000 18%, transparent 62%);
  mask-image: radial-gradient(circle, #000 18%, transparent 62%);
  clip-path: polygon(50% 50%, 8% 0, 92% 0);
  pointer-events: none;
  animation: crestDrift 9s ease-in-out infinite;
}

.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.8;
}

/* The apex node's ambient bloom */
.hero__ambient-glow {
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 0, 127, 0.2) 0%, rgba(155, 93, 229, 0.12) 45%, transparent 70%);
  filter: blur(60px);
  top: 62%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}

.hero__content {
  position: relative;
  z-index: 1;
  max-width: 980px;
  margin-inline: auto;
  text-align: center;
}

.hero__badge-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

.hero__title {
  font-size: var(--font-size-4xl);
  line-height: 1.04;
  margin-bottom: var(--space-6);
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

@media (min-width: 768px) { .hero__title { font-size: var(--font-size-6xl); } }
@media (min-width: 1024px) { .hero__title { font-size: var(--font-size-7xl); } }

.hero__lead {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: var(--space-10);
}

@media (min-width: 768px) { .hero__lead { font-size: var(--font-size-xl); } }

.hero__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* Metrics plate */
.telemetry-strip {
  margin-top: var(--space-16);
  padding: var(--space-6);
  background: rgba(27, 11, 42, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--color-lilac-line);
  border-radius: var(--radius-md);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  position: relative;
}

@media (min-width: 768px) {
  .telemetry-strip {
    grid-template-columns: repeat(4, 1fr);
    padding: var(--space-6) var(--space-8);
  }
  .telemetry-item + .telemetry-item { border-left: 1px solid var(--color-lilac-faint); }
}

.telemetry-item { display: flex; flex-direction: column; gap: var(--space-1); text-align: center; }

.telemetry-val {
  font-family: var(--font-display);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-bone);
  letter-spacing: -0.02em;
}

.telemetry-val--cyan { color: var(--color-lilac-soft); }

.telemetry-label {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------
   Showcase Cards — bone plates
   ------------------------------------------------------------ */
.showcase-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-8); }
@media (min-width: 768px) { .showcase-grid { grid-template-columns: repeat(2, 1fr); } }

.showcase-card {
  position: relative;
  background: var(--color-card-bg);
  border: 1px solid var(--color-lilac);
  border-radius: var(--radius-md);
  overflow: visible;
  display: flex;
  flex-direction: column;
  transition: all var(--transition-normal);
  box-shadow: 0 10px 30px rgba(18, 6, 28, 0.14);
}

.showcase-card:hover {
  border-color: var(--color-synapse);
  transform: translateY(-6px);
  box-shadow: 0 22px 48px rgba(18, 6, 28, 0.3), 0 0 0 1px var(--color-synapse), 0 0 28px rgba(255, 0, 127, 0.22);
}

.showcase-card:hover.hud-bracket::before,
.showcase-card:hover.hud-bracket::after { border-color: var(--color-synapse); }

.showcase-card__media {
  position: relative;
  height: 240px;
  overflow: hidden;
  background: var(--color-carapace);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

@media (min-width: 640px) { .showcase-card__media { height: 270px; } }

.showcase-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.showcase-card:hover .showcase-card__img { transform: scale(1.05); }

/* Violet carapace wash so any artwork sits inside the palette */
.showcase-card__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(18, 6, 28, 0.35) 0%, rgba(18, 6, 28, 0.25) 45%, rgba(18, 6, 28, 0.85) 100%),
    linear-gradient(135deg, rgba(155, 93, 229, 0.35), transparent 60%);
  mix-blend-mode: multiply;
  pointer-events: none;
}

.showcase-card__tag { position: absolute; top: var(--space-4); left: var(--space-4); z-index: 2; }

.showcase-card__status {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  padding: 4px 10px;
  border-radius: var(--radius-xs);
  background: rgba(18, 6, 28, 0.88);
  border: 1px solid rgba(0, 255, 204, 0.4);
  color: var(--color-warp);
}

.showcase-card__content {
  padding: var(--space-6) var(--space-6) var(--space-8);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.showcase-card__title {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--space-3);
  letter-spacing: -0.015em;
}

.showcase-card__desc {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-6);
  flex-grow: 1;
}

.showcase-card__specs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-lilac-line);
}

.showcase-spec {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  padding: 4px 9px;
  background: rgba(155, 93, 229, 0.1);
  border: 1px solid var(--color-lilac-faint);
  border-radius: var(--radius-xs);
  color: var(--color-lilac-deep);
}

/* Filter tabs */
.filter-tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-12);
}

.filter-tab {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  letter-spacing: 0.08em;
  padding: 9px 18px;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-lilac-line);
  transition: all var(--transition-fast);
}

.filter-tab:hover {
  color: var(--color-text-primary);
  border-color: var(--color-lilac);
  background: rgba(155, 93, 229, 0.1);
}

.filter-tab.is-active {
  background: var(--color-carapace);
  color: var(--color-bone);
  border-color: var(--color-carapace);
  box-shadow: 0 6px 16px rgba(18, 6, 28, 0.3), inset 0 -2px 0 var(--color-lilac);
}

/* ------------------------------------------------------------
   Capability Cards
   ------------------------------------------------------------ */
.card {
  background: var(--color-card-bg);
  border: 1px solid var(--color-lilac);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  transition: all var(--transition-normal);
  position: relative;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.35);
}

.card:hover {
  background: var(--color-card-bg-hover);
  border-color: var(--color-synapse);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.5), 0 0 26px rgba(255, 0, 127, 0.25);
  transform: translateY(-5px);
}

.card:hover.hud-bracket::before,
.card:hover.hud-bracket::after { border-color: var(--color-synapse); }

.card__icon-wrap {
  width: 54px;
  height: 54px;
  border-radius: var(--radius-sm);
  background: var(--color-carapace);
  border: 1px solid var(--color-lilac);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-5);
  transition: all var(--transition-fast);
}

.card:hover .card__icon-wrap {
  box-shadow: 0 0 18px rgba(155, 93, 229, 0.6);
  border-color: var(--color-lilac-soft);
}

.card__icon { width: 28px; height: 28px; color: var(--color-lilac-soft); }

.card__title { font-size: var(--font-size-xl); margin-bottom: var(--space-3); letter-spacing: -0.01em; }

.card__body { font-size: var(--font-size-base); color: var(--color-text-secondary); line-height: var(--line-height-relaxed); }

.card--dark { background: var(--color-card-bg); }

/* Warning card — talon gradient */
.card--talon {
  background: var(--gradient-talon);
  border-color: var(--color-crimson);
  --color-text-primary: #f5f2eb;
  --color-text-secondary: rgba(245, 242, 235, 0.8);
}

/* ------------------------------------------------------------
   Section headers
   ------------------------------------------------------------ */
.section-header { margin-bottom: var(--space-12); }
.section-header--center { text-align: center; }

.section-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-label);
  margin-bottom: var(--space-3);
}

.section-label::before,
.section-label::after {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--color-lilac);
}

.section-label--purple { color: var(--color-label); }

.section-header__title {
  font-size: var(--font-size-3xl);
  line-height: var(--line-height-tight);
  margin-bottom: var(--space-4);
  text-transform: uppercase;
  letter-spacing: -0.025em;
}

@media (min-width: 768px) { .section-header__title { font-size: var(--font-size-5xl); } }

.section-header__sub {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
  max-width: 640px;
}

.section-header--center .section-header__sub { margin-inline: auto; }

/* ------------------------------------------------------------
   Page heroes (About / Contact)
   ------------------------------------------------------------ */
.page-hero {
  background:
    radial-gradient(ellipse 55% 90% at 50% 120%, rgba(155, 93, 229, 0.3), transparent 70%),
    linear-gradient(180deg, #0a0311 0%, var(--color-carapace) 100%);
  padding-block: var(--space-24) calc(var(--space-16) + 36px);
  text-align: center;
  position: relative;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 36px), 50% 100%, 0 calc(100% - 36px));
}

.page-hero::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -60%;
  width: 130%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: repeating-conic-gradient(from -60deg at 50% 50%, rgba(155, 93, 229, 0.26) 0deg 0.35deg, transparent 0.35deg 5deg);
  -webkit-mask-image: radial-gradient(circle, #000 15%, transparent 60%);
  mask-image: radial-gradient(circle, #000 15%, transparent 60%);
  clip-path: polygon(50% 50%, 12% 0, 88% 0);
  pointer-events: none;
}

.page-hero .container { position: relative; z-index: 1; }

.page-hero__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-lilac-soft);
  margin-bottom: var(--space-4);
  background: rgba(155, 93, 229, 0.1);
  border: 1px solid var(--color-lilac);
  padding: 5px 14px;
  border-radius: var(--radius-xs);
}

.page-hero__title {
  font-size: var(--font-size-4xl);
  line-height: var(--line-height-tight);
  margin-bottom: var(--space-5);
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

@media (min-width: 768px) { .page-hero__title { font-size: var(--font-size-6xl); } }

.page-hero__sub {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  max-width: 640px;
  margin-inline: auto;
  line-height: var(--line-height-relaxed);
}

/* ------------------------------------------------------------
   Divider rules & pull-quote
   ------------------------------------------------------------ */
.rule {
  position: relative;
  width: 120px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-lilac) 30%, var(--color-lilac) 70%, transparent);
  border: none;
  margin-block: var(--space-6);
  overflow: visible;
}

.rule::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  background: var(--color-lilac);
  transform: translate(-50%, -50%) rotate(45deg);
}

.rule--center { margin-inline: auto; }

.pull-quote {
  max-width: 880px;
  margin-inline: auto;
  text-align: center;
  padding: var(--space-16) var(--space-8);
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(155, 93, 229, 0.25), transparent 70%),
    linear-gradient(180deg, var(--color-carapace-2), var(--color-carapace));
  border: 1px solid var(--color-lilac);
  border-radius: var(--radius-md);
  position: relative;
  box-shadow: 0 30px 70px rgba(18, 6, 28, 0.45);
}

.pull-quote__text {
  font-family: var(--font-display);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  color: var(--color-bone);
  letter-spacing: -0.015em;
}

@media (min-width: 768px) { .pull-quote__text { font-size: var(--font-size-4xl); } }

/* ------------------------------------------------------------
   Contact & forms
   ------------------------------------------------------------ */
.contact-container { display: grid; grid-template-columns: 1fr; gap: var(--space-10); }

@media (min-width: 900px) {
  .contact-container { grid-template-columns: 1.2fr 0.8fr; gap: var(--space-12); }
}

.contact-card {
  background: var(--color-card-bg);
  border: 1px solid var(--color-lilac);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  box-shadow: var(--shadow-lg);
  position: relative;
}

@media (min-width: 640px) { .contact-card { padding: var(--space-10); } }

.contact-form { display: flex; flex-direction: column; gap: var(--space-5); }
.form-group { display: flex; flex-direction: column; gap: var(--space-2); }

.form-label {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.14em;
  color: var(--color-text-secondary);
  text-transform: uppercase;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  background: var(--color-bone);
  border: 1px solid var(--color-lilac-line);
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  font-family: var(--font-base);
  font-size: var(--font-size-base);
  color: var(--color-ink);
  transition: all var(--transition-fast);
  outline: none;
}

/* Warp energy overflowing — focus only */
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--color-warp);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(0, 255, 204, 0.28), 0 0 22px var(--color-warp-glow);
}

.form-input::placeholder,
.form-textarea::placeholder { color: var(--color-text-muted); }

.form-select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239b5de5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  padding-right: 40px;
}

.form-select option { background-color: var(--color-bone); color: var(--color-ink); }
.form-textarea { resize: vertical; min-height: 120px; }

/* Status feedback */
.form-status {
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  display: none;
  margin-bottom: var(--space-4);
}

.form-status.is-visible { display: block; }

.form-status--success {
  background: var(--color-carapace);
  border: 1px solid var(--color-warp);
  color: var(--color-warp);
  box-shadow: 0 0 18px var(--color-warp-glow);
}

.form-status--error {
  background: var(--gradient-talon-diag);
  border: 1px solid var(--color-crimson);
  color: var(--color-bone);
}

.form-status--error a { color: var(--color-bone) !important; }

.form-status--loading {
  background: var(--color-carapace);
  border: 1px solid var(--color-warp);
  color: var(--color-warp);
}

/* Sidebar info plate */
.contact-info-card {
  background:
    radial-gradient(ellipse 80% 40% at 50% 0%, rgba(155, 93, 229, 0.22), transparent 70%),
    linear-gradient(180deg, var(--color-carapace-2), var(--color-carapace));
  border: 1px solid var(--color-lilac);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  box-shadow: var(--shadow-lg);
}

.contact-email-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-2); }

.email-display {
  font-family: var(--font-display);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-bone);
  word-break: break-all;
  transition: color var(--transition-fast), text-shadow var(--transition-fast);
}

.email-display:hover { color: var(--color-synapse-hot); text-shadow: 0 0 14px rgba(255, 0, 127, 0.5); }

.contact-section-label {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-lilac-soft);
  margin-bottom: var(--space-2);
}

/* ------------------------------------------------------------
   About page
   ------------------------------------------------------------ */
.story-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-10); align-items: center; }

@media (min-width: 768px) {
  .story-grid { grid-template-columns: 1.1fr 0.9fr; gap: var(--space-16); }
}

.story-media {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-lilac);
  box-shadow: var(--shadow-lg);
}

.story-media::before { z-index: 3; }

.story-media__img { width: 100%; height: 380px; object-fit: cover; filter: saturate(0.85) hue-rotate(20deg); }

.story-media::after {
  /* overrides hud-bracket after so the carapace wash stays on top of the image */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 6, 28, 0.2), rgba(18, 6, 28, 0.7));
  mix-blend-mode: multiply;
  border: none;
  width: auto;
  height: auto;
  pointer-events: none;
}

.pipeline-steps { display: grid; grid-template-columns: 1fr; gap: var(--space-6); margin-top: var(--space-10); }

@media (min-width: 768px) { .pipeline-steps { grid-template-columns: repeat(4, 1fr); } }

.pipeline-step {
  background: var(--color-card-bg);
  border: 1px solid var(--color-lilac);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  position: relative;
  transition: all var(--transition-normal);
}

.pipeline-step:hover {
  border-color: var(--color-synapse);
  transform: translateY(-5px);
  box-shadow: 0 16px 34px rgba(18, 6, 28, 0.25), 0 0 20px rgba(255, 0, 127, 0.2);
}

.pipeline-step__num {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-label);
  margin-bottom: var(--space-3);
  letter-spacing: 0.14em;
  font-weight: var(--font-weight-semibold);
}

.pipeline-step__title { font-size: var(--font-size-lg); margin-bottom: var(--space-2); }
.pipeline-step__body { font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: var(--line-height-normal); }

/* ------------------------------------------------------------
   404 / Error — warning plate
   ------------------------------------------------------------ */
.error-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-8);
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 50% at 50% 100%, rgba(154, 3, 30, 0.45), transparent 70%),
    linear-gradient(180deg, #0a0311 0%, var(--color-carapace) 100%);
}

.error-page__radar-ring {
  width: 360px;
  height: 360px;
  border-radius: 50%;
  border: 1px dashed var(--color-lilac-line);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: rotateRing 30s linear infinite;
}

@keyframes rotateRing {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.error-page__code {
  font-family: var(--font-display);
  font-size: 8rem;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  background: var(--gradient-talon);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 1px var(--color-lilac)) drop-shadow(0 0 24px rgba(154, 3, 30, 0.6));
  -webkit-text-stroke: 1px var(--color-lilac-line);
  margin-bottom: var(--space-4);
  letter-spacing: -0.04em;
}

.error-page__title { font-size: var(--font-size-3xl); margin-bottom: var(--space-4); text-transform: uppercase; }
.error-page__body { font-size: var(--font-size-lg); color: var(--color-text-secondary); margin-bottom: var(--space-8); max-width: 440px; }

/* ------------------------------------------------------------
   Footer — talons & hooves
   ------------------------------------------------------------ */
.footer {
  background: var(--gradient-talon);
  color: var(--color-bone);
  padding-block: var(--space-20) var(--space-8);
  position: relative;
  z-index: 1;
}

.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--color-lilac) 25%, var(--color-lilac-soft) 50%, var(--color-lilac) 75%, transparent 100%);
}

.footer__inner { display: grid; gap: var(--space-10); grid-template-columns: 1fr; }

@media (min-width: 768px) {
  .footer__inner { grid-template-columns: 1.6fr 1fr 1fr; gap: var(--space-12); }
}

.footer__brand { display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; }

.footer__logo {
  display: block;
  height: auto;
  width: 210px;
  max-width: 100%;
  filter: brightness(0) invert(1);
}

.footer__tagline {
  font-size: var(--font-size-sm);
  color: rgba(245, 242, 235, 0.78);
  line-height: var(--line-height-relaxed);
  max-width: 320px;
}

.footer__col-heading {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-bone);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid rgba(155, 93, 229, 0.6);
  display: inline-block;
}

.footer__links { display: flex; flex-direction: column; gap: var(--space-3); }

.footer__link {
  font-size: var(--font-size-sm);
  color: rgba(245, 242, 235, 0.82);
  transition: color var(--transition-fast), transform var(--transition-fast);
  display: inline-block;
  width: fit-content;
}

.footer__link:hover { color: #fff; transform: translateX(4px); text-shadow: 0 0 12px rgba(255, 0, 127, 0.8); }

.footer__address {
  font-size: var(--font-size-sm);
  color: rgba(245, 242, 235, 0.78);
  line-height: var(--line-height-relaxed);
  font-style: normal;
}

.footer__email-link {
  color: var(--color-bone);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  text-decoration: underline;
  text-decoration-color: var(--color-lilac);
  text-underline-offset: 4px;
  transition: all var(--transition-fast);
  width: fit-content;
}

.footer__email-link:hover { color: #fff; text-decoration-color: var(--color-synapse); text-shadow: 0 0 12px rgba(255, 0, 127, 0.8); }

.footer__bottom {
  margin-top: var(--space-16);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(155, 93, 229, 0.45);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
}

@media (min-width: 640px) {
  .footer__bottom { flex-direction: row; align-items: center; justify-content: space-between; }
}

.footer__copyright {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: rgba(245, 242, 235, 0.65);
}

.footer .hud-tag { color: var(--color-bone); background: rgba(0, 0, 0, 0.45); }