@charset "UTF-8";
/* ===========================================================
   Self-hosted web fonts (no third-party requests).
   Montserrat + JetBrains Mono are variable fonts (one .woff2
   each covers the full weight axis), latin subset, served from
   /fonts. Both are licensed SIL OFL 1.1 — see the OFL.txt files
   alongside the .woff2 in wwwroot/fonts.
   =========================================================== */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/montserrat.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("/fonts/jetbrains-mono.woff2") format("woff2");
}
/* ===========================================================
   Inline SVG icons (sprite defined in _IconSprite.cshtml).
   Replaces Font Awesome — sized in `em` and inherits text color
   via `currentColor`, so existing rules that set font-size/color
   on an icon keep working. Use:
     <svg class="icon"><use href="#i-NAME"/></svg>
   =========================================================== */
.icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  display: inline-block;
  vertical-align: -0.125em;
  flex-shrink: 0;
}

.icon--lg {
  width: 1.33em;
  height: 1.33em;
  vertical-align: -0.225em;
}

.icon--spin {
  animation: icon-spin 1s linear infinite;
}

@keyframes icon-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .icon--spin {
    animation-duration: 2.5s;
  }
}
.ma-0 {
  margin: 0px !important;
}

.mt-0 {
  margin-top: 0px !important;
}

.mb-0 {
  margin-bottom: 0px !important;
}

.ml-0 {
  margin-left: 0px !important;
}

.mr-0 {
  margin-right: 0px !important;
}

.mx-0 {
  margin-left: 0px !important;
  margin-right: 0px !important;
}

.my-0 {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}

.pa-0 {
  padding: 0px !important;
}

.pt-0 {
  padding-top: 0px !important;
}

.pb-0 {
  padding-bottom: 0px !important;
}

.pl-0 {
  padding-left: 0px !important;
}

.pr-0 {
  padding-right: 0px !important;
}

.px-0 {
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.py-0 {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

.ma-1 {
  margin: 4px !important;
}

.ma-n1 {
  margin: -4px !important;
}

.mt-1 {
  margin-top: 4px !important;
}

.mt-n1 {
  margin-top: -4px !important;
}

.mb-1 {
  margin-bottom: 4px !important;
}

.mb-n1 {
  margin-bottom: -4px !important;
}

.ml-1 {
  margin-left: 4px !important;
}

.ml-n1 {
  margin-left: -4px !important;
}

.mr-1 {
  margin-right: 4px !important;
}

.mr-n1 {
  margin-right: -4px !important;
}

.mx-1 {
  margin-left: 4px !important;
  margin-right: 4px !important;
}

.mx-n1 {
  margin-left: -4px !important;
  margin-right: -4px !important;
}

.my-1 {
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}

.my-n1 {
  margin-top: -4px !important;
  margin-bottom: -4px !important;
}

.pa-1 {
  padding: 4px !important;
}

.pt-1 {
  padding-top: 4px !important;
}

.pb-1 {
  padding-bottom: 4px !important;
}

.pl-1 {
  padding-left: 4px !important;
}

.pr-1 {
  padding-right: 4px !important;
}

.px-1 {
  padding-left: 4px !important;
  padding-right: 4px !important;
}

.py-1 {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

.ma-2 {
  margin: 8px !important;
}

.ma-n2 {
  margin: -8px !important;
}

.mt-2 {
  margin-top: 8px !important;
}

.mt-n2 {
  margin-top: -8px !important;
}

.mb-2 {
  margin-bottom: 8px !important;
}

.mb-n2 {
  margin-bottom: -8px !important;
}

.ml-2 {
  margin-left: 8px !important;
}

.ml-n2 {
  margin-left: -8px !important;
}

.mr-2 {
  margin-right: 8px !important;
}

.mr-n2 {
  margin-right: -8px !important;
}

.mx-2 {
  margin-left: 8px !important;
  margin-right: 8px !important;
}

.mx-n2 {
  margin-left: -8px !important;
  margin-right: -8px !important;
}

.my-2 {
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}

.my-n2 {
  margin-top: -8px !important;
  margin-bottom: -8px !important;
}

.pa-2 {
  padding: 8px !important;
}

.pt-2 {
  padding-top: 8px !important;
}

.pb-2 {
  padding-bottom: 8px !important;
}

.pl-2 {
  padding-left: 8px !important;
}

.pr-2 {
  padding-right: 8px !important;
}

.px-2 {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

.py-2 {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.ma-3 {
  margin: 12px !important;
}

.ma-n3 {
  margin: -12px !important;
}

.mt-3 {
  margin-top: 12px !important;
}

.mt-n3 {
  margin-top: -12px !important;
}

.mb-3 {
  margin-bottom: 12px !important;
}

.mb-n3 {
  margin-bottom: -12px !important;
}

.ml-3 {
  margin-left: 12px !important;
}

.ml-n3 {
  margin-left: -12px !important;
}

.mr-3 {
  margin-right: 12px !important;
}

.mr-n3 {
  margin-right: -12px !important;
}

.mx-3 {
  margin-left: 12px !important;
  margin-right: 12px !important;
}

.mx-n3 {
  margin-left: -12px !important;
  margin-right: -12px !important;
}

.my-3 {
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}

.my-n3 {
  margin-top: -12px !important;
  margin-bottom: -12px !important;
}

.pa-3 {
  padding: 12px !important;
}

.pt-3 {
  padding-top: 12px !important;
}

.pb-3 {
  padding-bottom: 12px !important;
}

.pl-3 {
  padding-left: 12px !important;
}

.pr-3 {
  padding-right: 12px !important;
}

.px-3 {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

.py-3 {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

.ma-4 {
  margin: 16px !important;
}

.ma-n4 {
  margin: -16px !important;
}

.mt-4 {
  margin-top: 16px !important;
}

.mt-n4 {
  margin-top: -16px !important;
}

.mb-4 {
  margin-bottom: 16px !important;
}

.mb-n4 {
  margin-bottom: -16px !important;
}

.ml-4 {
  margin-left: 16px !important;
}

.ml-n4 {
  margin-left: -16px !important;
}

.mr-4 {
  margin-right: 16px !important;
}

.mr-n4 {
  margin-right: -16px !important;
}

.mx-4 {
  margin-left: 16px !important;
  margin-right: 16px !important;
}

.mx-n4 {
  margin-left: -16px !important;
  margin-right: -16px !important;
}

.my-4 {
  margin-top: 16px !important;
  margin-bottom: 16px !important;
}

.my-n4 {
  margin-top: -16px !important;
  margin-bottom: -16px !important;
}

.pa-4 {
  padding: 16px !important;
}

.pt-4 {
  padding-top: 16px !important;
}

.pb-4 {
  padding-bottom: 16px !important;
}

.pl-4 {
  padding-left: 16px !important;
}

.pr-4 {
  padding-right: 16px !important;
}

.px-4 {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

.py-4 {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

.ma-5 {
  margin: 20px !important;
}

.ma-n5 {
  margin: -20px !important;
}

.mt-5 {
  margin-top: 20px !important;
}

.mt-n5 {
  margin-top: -20px !important;
}

.mb-5 {
  margin-bottom: 20px !important;
}

.mb-n5 {
  margin-bottom: -20px !important;
}

.ml-5 {
  margin-left: 20px !important;
}

.ml-n5 {
  margin-left: -20px !important;
}

.mr-5 {
  margin-right: 20px !important;
}

.mr-n5 {
  margin-right: -20px !important;
}

.mx-5 {
  margin-left: 20px !important;
  margin-right: 20px !important;
}

.mx-n5 {
  margin-left: -20px !important;
  margin-right: -20px !important;
}

.my-5 {
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}

.my-n5 {
  margin-top: -20px !important;
  margin-bottom: -20px !important;
}

.pa-5 {
  padding: 20px !important;
}

.pt-5 {
  padding-top: 20px !important;
}

.pb-5 {
  padding-bottom: 20px !important;
}

.pl-5 {
  padding-left: 20px !important;
}

.pr-5 {
  padding-right: 20px !important;
}

.px-5 {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

.py-5 {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

.ma-6 {
  margin: 24px !important;
}

.ma-n6 {
  margin: -24px !important;
}

.mt-6 {
  margin-top: 24px !important;
}

.mt-n6 {
  margin-top: -24px !important;
}

.mb-6 {
  margin-bottom: 24px !important;
}

.mb-n6 {
  margin-bottom: -24px !important;
}

.ml-6 {
  margin-left: 24px !important;
}

.ml-n6 {
  margin-left: -24px !important;
}

.mr-6 {
  margin-right: 24px !important;
}

.mr-n6 {
  margin-right: -24px !important;
}

.mx-6 {
  margin-left: 24px !important;
  margin-right: 24px !important;
}

.mx-n6 {
  margin-left: -24px !important;
  margin-right: -24px !important;
}

.my-6 {
  margin-top: 24px !important;
  margin-bottom: 24px !important;
}

.my-n6 {
  margin-top: -24px !important;
  margin-bottom: -24px !important;
}

.pa-6 {
  padding: 24px !important;
}

.pt-6 {
  padding-top: 24px !important;
}

.pb-6 {
  padding-bottom: 24px !important;
}

.pl-6 {
  padding-left: 24px !important;
}

.pr-6 {
  padding-right: 24px !important;
}

.px-6 {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

.py-6 {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}

.ma-8 {
  margin: 32px !important;
}

.ma-n8 {
  margin: -32px !important;
}

.mt-8 {
  margin-top: 32px !important;
}

.mt-n8 {
  margin-top: -32px !important;
}

.mb-8 {
  margin-bottom: 32px !important;
}

.mb-n8 {
  margin-bottom: -32px !important;
}

.ml-8 {
  margin-left: 32px !important;
}

.ml-n8 {
  margin-left: -32px !important;
}

.mr-8 {
  margin-right: 32px !important;
}

.mr-n8 {
  margin-right: -32px !important;
}

.mx-8 {
  margin-left: 32px !important;
  margin-right: 32px !important;
}

.mx-n8 {
  margin-left: -32px !important;
  margin-right: -32px !important;
}

.my-8 {
  margin-top: 32px !important;
  margin-bottom: 32px !important;
}

.my-n8 {
  margin-top: -32px !important;
  margin-bottom: -32px !important;
}

.pa-8 {
  padding: 32px !important;
}

.pt-8 {
  padding-top: 32px !important;
}

.pb-8 {
  padding-bottom: 32px !important;
}

.pl-8 {
  padding-left: 32px !important;
}

.pr-8 {
  padding-right: 32px !important;
}

.px-8 {
  padding-left: 32px !important;
  padding-right: 32px !important;
}

.py-8 {
  padding-top: 32px !important;
  padding-bottom: 32px !important;
}

.ma-10 {
  margin: 40px !important;
}

.ma-n10 {
  margin: -40px !important;
}

.mt-10 {
  margin-top: 40px !important;
}

.mt-n10 {
  margin-top: -40px !important;
}

.mb-10 {
  margin-bottom: 40px !important;
}

.mb-n10 {
  margin-bottom: -40px !important;
}

.ml-10 {
  margin-left: 40px !important;
}

.ml-n10 {
  margin-left: -40px !important;
}

.mr-10 {
  margin-right: 40px !important;
}

.mr-n10 {
  margin-right: -40px !important;
}

.mx-10 {
  margin-left: 40px !important;
  margin-right: 40px !important;
}

.mx-n10 {
  margin-left: -40px !important;
  margin-right: -40px !important;
}

.my-10 {
  margin-top: 40px !important;
  margin-bottom: 40px !important;
}

.my-n10 {
  margin-top: -40px !important;
  margin-bottom: -40px !important;
}

.pa-10 {
  padding: 40px !important;
}

.pt-10 {
  padding-top: 40px !important;
}

.pb-10 {
  padding-bottom: 40px !important;
}

.pl-10 {
  padding-left: 40px !important;
}

.pr-10 {
  padding-right: 40px !important;
}

.px-10 {
  padding-left: 40px !important;
  padding-right: 40px !important;
}

.py-10 {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

.ma-12 {
  margin: 48px !important;
}

.ma-n12 {
  margin: -48px !important;
}

.mt-12 {
  margin-top: 48px !important;
}

.mt-n12 {
  margin-top: -48px !important;
}

.mb-12 {
  margin-bottom: 48px !important;
}

.mb-n12 {
  margin-bottom: -48px !important;
}

.ml-12 {
  margin-left: 48px !important;
}

.ml-n12 {
  margin-left: -48px !important;
}

.mr-12 {
  margin-right: 48px !important;
}

.mr-n12 {
  margin-right: -48px !important;
}

.mx-12 {
  margin-left: 48px !important;
  margin-right: 48px !important;
}

.mx-n12 {
  margin-left: -48px !important;
  margin-right: -48px !important;
}

.my-12 {
  margin-top: 48px !important;
  margin-bottom: 48px !important;
}

.my-n12 {
  margin-top: -48px !important;
  margin-bottom: -48px !important;
}

.pa-12 {
  padding: 48px !important;
}

.pt-12 {
  padding-top: 48px !important;
}

.pb-12 {
  padding-bottom: 48px !important;
}

.pl-12 {
  padding-left: 48px !important;
}

.pr-12 {
  padding-right: 48px !important;
}

.px-12 {
  padding-left: 48px !important;
  padding-right: 48px !important;
}

.py-12 {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}

:root {
  --c-light-grey: #c7c7c7;
  --c-grey: #2d2d2d;
  --c-background: #15181F;
  --c-surface: #1F242E;
  --c-text-main: #ececec;
  --c-text-muted: #a1a1a6;
  --c-text-light: #71717a;
  --c-border: #27272a;
  --c-nav-top: rgb(21 24 31 / 35%);
  --c-nav-bg: rgb(21 24 31 / 80%);
  --c-nav-panel: rgb(21 24 31 / 92%);
  --c-grid-line: rgb(255 255 255 / 4%);
  --c-hairline: rgb(255 255 255 / 8%);
  --c-control-border: rgb(255 255 255 / 10%);
  --c-shadow: rgb(0 0 0 / 35%);
  --c-input-bg: #1F242E;
  --c-input-border: #444;
  --c-surface-glass: rgb(31 36 46 / 55%);
  --c-bg-glass: rgb(21 24 31 / 80%);
  --c-hero-photo: url("/images/hero-network.jpg");
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --c-light-grey: #6b7280;
    --c-grey: #e9ebef;
    --c-background: #f5f6f8;
    --c-surface: #ffffff;
    --c-text-main: #1a1d24;
    --c-text-muted: #565b66;
    --c-text-light: #8a8f9c;
    --c-border: #e2e5ea;
    --c-nav-top: rgb(247 248 250 / 65%);
    --c-nav-bg: rgb(255 255 255 / 85%);
    --c-nav-panel: rgb(255 255 255 / 95%);
    --c-grid-line: rgb(20 24 31 / 5%);
    --c-hairline: rgb(20 24 31 / 10%);
    --c-control-border: rgb(20 24 31 / 14%);
    --c-shadow: rgb(20 24 31 / 14%);
    --c-input-bg: #ffffff;
    --c-input-border: #cfd4dc;
    --c-surface-glass: rgb(255 255 255 / 72%);
    --c-bg-glass: rgb(255 255 255 / 82%);
    --c-hero-photo: url("/images/hero-network-light.jpg");
  }
}
[data-theme=light] {
  --c-light-grey: #6b7280;
  --c-grey: #e9ebef;
  --c-background: #f5f6f8;
  --c-surface: #ffffff;
  --c-text-main: #1a1d24;
  --c-text-muted: #565b66;
  --c-text-light: #8a8f9c;
  --c-border: #e2e5ea;
  --c-nav-top: rgb(247 248 250 / 65%);
  --c-nav-bg: rgb(255 255 255 / 85%);
  --c-nav-panel: rgb(255 255 255 / 95%);
  --c-grid-line: rgb(20 24 31 / 5%);
  --c-hairline: rgb(20 24 31 / 10%);
  --c-control-border: rgb(20 24 31 / 14%);
  --c-shadow: rgb(20 24 31 / 14%);
  --c-input-bg: #ffffff;
  --c-input-border: #cfd4dc;
  --c-surface-glass: rgb(255 255 255 / 72%);
  --c-bg-glass: rgb(255 255 255 / 82%);
  --c-hero-photo: url("/images/hero-network-light.jpg");
}

[data-theme=dark] {
  --c-light-grey: #c7c7c7;
  --c-grey: #2d2d2d;
  --c-background: #15181F;
  --c-surface: #1F242E;
  --c-text-main: #ececec;
  --c-text-muted: #a1a1a6;
  --c-text-light: #71717a;
  --c-border: #27272a;
  --c-nav-top: rgb(21 24 31 / 35%);
  --c-nav-bg: rgb(21 24 31 / 80%);
  --c-nav-panel: rgb(21 24 31 / 92%);
  --c-grid-line: rgb(255 255 255 / 4%);
  --c-hairline: rgb(255 255 255 / 8%);
  --c-control-border: rgb(255 255 255 / 10%);
  --c-shadow: rgb(0 0 0 / 35%);
  --c-input-bg: #1F242E;
  --c-input-border: #444;
  --c-surface-glass: rgb(31 36 46 / 55%);
  --c-bg-glass: rgb(21 24 31 / 80%);
  --c-hero-photo: url("/images/hero-network.jpg");
}

/* ===========================================================
   Navbar — "engineered precision"
   Frosted-glass bar, scroll-aware, indigo→teal signal line.
   =========================================================== */
.navbar {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  height: 64px;
  background: var(--c-nav-top);
  border-bottom: 1px solid transparent;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, -webkit-backdrop-filter 0.3s ease, backdrop-filter 0.3s ease;
}
.navbar::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, #4C5EEB 25%, #6f7df0 75%, transparent 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.navbar.is-scrolled {
  background: var(--c-nav-bg);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  box-shadow: 0 8px 30px var(--c-shadow);
  border-bottom-color: var(--c-hairline);
}
.navbar.is-scrolled::after {
  opacity: 0.9;
}

/* Blueprint grid texture — same language as the footer, kept faint
   and edge-faded so it reads as engineered texture, not a table. */
.navbar-grid-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: linear-gradient(var(--c-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--c-grid-line) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.navbar.is-scrolled .navbar-grid-bg {
  opacity: 0.85;
}

.navbar-container {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  height: 64px;
  gap: 1.5rem;
}

/* ---- Brand ---- */
.navbar-brand {
  display: flex;
  align-items: center;
  margin-right: 0.5rem;
  position: relative;
  isolation: isolate;
}
.navbar-brand img {
  height: 40px;
  width: auto;
  display: block;
  vertical-align: middle;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease;
}
.navbar-brand::before {
  content: "";
  position: absolute;
  inset: -8px -12px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(76, 94, 235, 0.35), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.navbar-brand:hover img {
  transform: scale(1.06);
}
.navbar-brand:hover::before {
  opacity: 1;
}

/* ---- Links ---- */
.navbar-links {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.navbar-links li {
  position: relative;
}
.navbar-links .navbar-cta {
  display: none;
}
.navbar-links a {
  position: relative;
  text-decoration: none;
  color: var(--c-text-muted);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  padding: 0.5rem 0;
  transition: color 0.25s ease;
}
.navbar-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #4C5EEB, #6f7df0);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1);
}
.navbar-links a:hover {
  color: var(--c-text-main);
}
.navbar-links a:hover::after {
  transform: scaleX(1);
}
.navbar-links .current {
  color: var(--c-text-main);
  cursor: default;
  pointer-events: none;
}
.navbar-links .current::after {
  transform: scaleX(1);
}

/* Sign-out — a session action kept OUT of the primary nav. On desktop it's a
   compact icon button in the right-hand control cluster (beside the theme
   toggle); on mobile it's a distinct row at the foot of the dropdown panel. */
.navbar-signout-form {
  margin: 0;
  padding: 0;
  display: inline-flex;
}

.navbar-signout-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  padding: 0;
  background: none;
  border: 1px solid var(--c-control-border);
  border-radius: 8px;
  color: var(--c-text-muted);
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.navbar-signout-btn .icon {
  width: 1.05rem;
  height: 1.05rem;
  transition: transform 0.25s ease;
}
.navbar-signout-btn:hover {
  color: #ff3860;
  border-color: rgba(255, 56, 96, 0.5);
  background: rgba(255, 56, 96, 0.1);
}
.navbar-signout-btn:hover .icon {
  transform: translateX(2px);
}

.navbar-signin-link {
  display: inline-flex;
  align-items: center;
  font-weight: 500;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  color: var(--c-text-muted);
  text-decoration: none;
  padding: 0.5rem 0.4rem;
  transition: color 0.25s ease;
}
.navbar-signin-link:hover {
  color: var(--c-text-main);
}

.navbar-mobile-signout,
.navbar-mobile-signin {
  display: none;
}

/* ---- Icon-button tooltips (theme toggle + sign-out) ----
   Styled hover/focus bubble below the control; text comes from data-tip
   (localized, set server-side / synced by the theme JS). */
.has-tip {
  position: relative;
}

.has-tip::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 11px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  white-space: nowrap;
  padding: 0.4rem 0.6rem;
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--c-text-main);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 7px;
  box-shadow: 0 10px 28px var(--c-shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 100;
}

.has-tip::before {
  content: "";
  position: absolute;
  top: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 8px;
  height: 8px;
  background: var(--c-surface);
  border-left: 1px solid var(--c-border);
  border-top: 1px solid var(--c-border);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
  z-index: 101;
}

@media (hover: hover) {
  .has-tip:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  .has-tip:hover::before {
    opacity: 1;
  }
}
.has-tip:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.has-tip:focus-visible::before {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .has-tip::after {
    transform: translateX(-50%);
    transition: opacity 0.18s ease;
  }
}
/* ---- Right-side actions / CTA ---- */
.navbar-spacer {
  flex: 1;
}

.navbar-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.navbar-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.25rem;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: #ffffff;
  background: linear-gradient(135deg, #4C5EEB, #6f7df0);
  border: 1px solid transparent;
  background-clip: padding-box;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.navbar-cta .icon {
  font-size: 0.85em;
  transition: transform 0.25s ease;
}
.navbar-cta:hover {
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(76, 94, 235, 0.35);
  filter: brightness(1.05);
}
.navbar-cta:hover .icon {
  transform: translateX(3px);
}
.navbar-cta:active {
  transform: translateY(0);
}

/* ---- Theme toggle (sun ⇄ moon) ---- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  background: none;
  border: 1px solid var(--c-control-border);
  border-radius: 8px;
  color: var(--c-text-muted);
  cursor: pointer;
  padding: 0;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.theme-toggle .icon {
  width: 1.05rem;
  height: 1.05rem;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
}
.theme-toggle .theme-toggle-moon {
  display: none;
}
.theme-toggle .theme-toggle-sun {
  display: block;
}
.theme-toggle:hover {
  color: var(--c-text-main);
  border-color: rgba(76, 94, 235, 0.5);
}
.theme-toggle:hover .icon {
  transform: rotate(20deg);
}

[data-theme=light] .theme-toggle .theme-toggle-sun {
  display: none;
}
[data-theme=light] .theme-toggle .theme-toggle-moon {
  display: block;
}

/* ---- Hamburger (animated bars → X) ---- */
.navbar-toggler {
  display: none;
  position: relative;
  width: 40px;
  height: 40px;
  background: none;
  border: 1px solid var(--c-control-border);
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
  margin-left: auto;
}
.navbar-toggler .bar {
  position: absolute;
  left: 50%;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--c-text-main);
  transform: translateX(-50%);
  transition: transform 0.3s ease, opacity 0.2s ease, top 0.3s ease;
}
.navbar-toggler .bar:nth-child(1) {
  top: 13px;
}
.navbar-toggler .bar:nth-child(2) {
  top: 19px;
}
.navbar-toggler .bar:nth-child(3) {
  top: 25px;
}
.navbar-toggler:hover {
  border-color: rgba(76, 94, 235, 0.5);
}
.navbar-toggler.is-open {
  border-color: rgba(76, 94, 235, 0.5);
  background: rgba(76, 94, 235, 0.1);
}
.navbar-toggler.is-open .bar:nth-child(1) {
  top: 19px;
  transform: translateX(-50%) rotate(45deg);
}
.navbar-toggler.is-open .bar:nth-child(2) {
  opacity: 0;
}
.navbar-toggler.is-open .bar:nth-child(3) {
  top: 19px;
  transform: translateX(-50%) rotate(-45deg);
}

/* ===========================================================
   Mobile layout
   =========================================================== */
@media (max-width: 840px) {
  .navbar-toggler {
    display: block;
  }
  .navbar-container {
    gap: 0.5rem;
  }
  .theme-toggle {
    margin-left: auto;
  }
  .navbar-toggler {
    margin-left: 0;
  }
  .navbar-spacer {
    display: none;
  }
  .navbar-actions {
    display: none;
  }
  .navbar-links {
    position: absolute;
    top: calc(100% + 10px);
    left: 0.75rem;
    right: 0.75rem;
    width: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
    padding: 0.5rem;
    background: var(--c-nav-panel);
    -webkit-backdrop-filter: saturate(160%) blur(16px);
    backdrop-filter: saturate(160%) blur(16px);
    border: 1px solid var(--c-hairline);
    border-radius: 16px;
    box-shadow: 0 18px 50px var(--c-shadow);
    opacity: 0;
    transform: translateY(-10px) scale(0.98);
    transform-origin: top right;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.25s ease, transform 0.28s cubic-bezier(0.34, 1.4, 0.64, 1), visibility 0s linear 0.28s;
  }
  .navbar-links li {
    width: 100%;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  .navbar-links a {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0.8rem 0.95rem;
    font-size: 1rem;
    border-radius: 10px;
    color: var(--c-text-muted);
    transition: color 0.2s ease, background 0.2s ease;
  }
  .navbar-links a::after {
    display: none;
  }
  .navbar-links a:hover, .navbar-links a:focus-visible {
    color: var(--c-text-main);
    background: var(--c-hairline);
  }
  .navbar-links .current {
    color: var(--c-text-main);
    background: rgba(76, 94, 235, 0.12);
  }
  .navbar-links .current::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 1.1rem;
    border-radius: 3px;
    background: linear-gradient(180deg, #4C5EEB, #6f7df0);
  }
  .navbar-links .navbar-cta {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
    margin: 0.4rem 0 0.15rem;
    padding: 0.8rem 1rem;
    font-size: 0.95rem;
    color: #ffffff;
  }
  .navbar-links .navbar-cta:hover, .navbar-links .navbar-cta:focus-visible {
    color: #ffffff;
    background: linear-gradient(135deg, #4C5EEB, #6f7df0);
  }
  .navbar-links .navbar-mobile-signout,
  .navbar-links .navbar-mobile-signin {
    display: block;
    width: 100%;
    margin-top: 0.4rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--c-hairline);
  }
  .navbar-links .navbar-mobile-signout .navbar-signout-form {
    width: 100%;
    display: block;
  }
  .navbar-links .navbar-signout-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.8rem 0.95rem;
    border-radius: 10px;
    font: inherit;
    font-size: 1rem;
    font-weight: 500;
    color: #ff3860;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background 0.2s ease;
  }
  .navbar-links .navbar-signout-link .icon {
    width: 1.05rem;
    height: 1.05rem;
  }
  .navbar-links .navbar-signout-link:hover, .navbar-links .navbar-signout-link:focus-visible {
    background: rgba(255, 56, 96, 0.1);
  }
  .navbar-links.is-active {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    visibility: visible;
    transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.34, 1.4, 0.64, 1);
  }
  .navbar-links.is-active li {
    opacity: 1;
    transform: translateY(0);
  }
  .navbar-links.is-active li:nth-child(1) {
    transition-delay: 0.035s;
  }
  .navbar-links.is-active li:nth-child(2) {
    transition-delay: 0.07s;
  }
  .navbar-links.is-active li:nth-child(3) {
    transition-delay: 0.105s;
  }
  .navbar-links.is-active li:nth-child(4) {
    transition-delay: 0.14s;
  }
  .navbar-links.is-active li:nth-child(5) {
    transition-delay: 0.175s;
  }
  .navbar-links.is-active li:nth-child(6) {
    transition-delay: 0.21s;
  }
  .navbar-links.is-active li:nth-child(7) {
    transition-delay: 0.245s;
  }
  .navbar-links.is-active li:nth-child(8) {
    transition-delay: 0.28s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .navbar,
  .navbar *,
  .navbar::after {
    transition: none !important;
  }
}
/* ===========================================================
   Hero / welcome — "engineered precision"
   CSS-built atmosphere (no heavyweight bitmap): blueprint grid,
   drifting blue→teal glow mesh, a scanning signal line, and a
   staggered headline reveal. Mirrors the navbar/footer language.
   =========================================================== */
.welcome-section {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 62vh;
  margin-top: 0;
  padding: 5.5rem 0 3.5rem;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--c-background);
}
.welcome-section::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, #4C5EEB 25%, #6f7df0 75%, transparent 100%);
  box-shadow: 0 0 18px rgba(76, 94, 235, 0.4);
  z-index: 2;
}
@media (max-width: 768px) {
  .welcome-section {
    min-height: 56vh;
    padding: 6.5rem 0 3rem;
  }
}

/* ---- Atmospheric layers ---- */
.hero-grid {
  position: absolute;
  inset: 0;
  z-index: -3;
  background-image: linear-gradient(var(--c-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--c-grid-line) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 30% 40%, #000 30%, transparent 80%);
  mask-image: radial-gradient(ellipse 90% 80% at 30% 40%, #000 30%, transparent 80%);
}

.hero-glow {
  position: absolute;
  inset: -20% -10%;
  z-index: -2;
  pointer-events: none;
  background: radial-gradient(38% 50% at 22% 28%, rgba(76, 94, 235, 0.34), transparent 70%), radial-gradient(40% 55% at 82% 78%, rgba(111, 125, 240, 0.2), transparent 72%);
  filter: blur(6px);
  animation: hero-drift 18s ease-in-out infinite alternate;
}

.hero-scan {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent 0%, rgba(111, 125, 240, 0.06) 48%, rgba(111, 125, 240, 0.14) 50%, rgba(111, 125, 240, 0.06) 52%, transparent 100%);
  background-size: 100% 220px;
  background-repeat: no-repeat;
  animation: hero-scan 7s linear infinite;
}

@keyframes hero-drift {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  100% {
    transform: translate3d(-3%, 2%, 0) scale(1.06);
  }
}
@keyframes hero-scan {
  0% {
    background-position: 0 -240px;
  }
  100% {
    background-position: 0 calc(100% + 240px);
  }
}
/* ---- Right-anchored network artwork ---- */
.hero-bg {
  position: absolute;
  inset: 0 0 0 auto;
  width: clamp(560px, 66%, 1150px);
  z-index: -1;
  pointer-events: none;
  background-image: var(--c-hero-photo);
  background-size: cover;
  background-position: right center;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 46%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 46%);
}

@media (max-width: 768px) {
  .hero-bg {
    display: none;
  }
}
/* ---- Content ---- */
.welcome-section .section-container,
.hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0 0 1.25rem;
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6f7df0;
}
.hero-eyebrow::before {
  content: "";
  width: 2.25rem;
  height: 1px;
  background: linear-gradient(90deg, #4C5EEB, #6f7df0);
}
@media (max-width: 768px) {
  .hero-eyebrow {
    font-size: 0.7rem;
    margin-bottom: 0.9rem;
  }
}

.welcome-text {
  max-width: 640px;
}

.hero-title,
.welcome-text h1 {
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--c-text-main);
}

.hero-line {
  display: block;
}
.hero-line--muted {
  color: var(--c-text-muted);
}
.hero-line--accent {
  background: linear-gradient(100deg, #4C5EEB 10%, #6f7df0 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---- Subhead + actions ---- */
.hero-sub {
  max-width: 46ch;
  margin: 1.5rem 0 0;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.6;
  color: var(--c-text-muted);
}
@media (max-width: 768px) {
  .hero-sub {
    font-size: 1rem;
    margin-top: 1.1rem;
  }
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2rem;
}
.hero-actions .btn {
  margin-top: 0;
}
@media (max-width: 768px) {
  .hero-actions {
    margin-top: 1.5rem;
    gap: 0.7rem;
  }
}

/* ---- Scroll cue ---- */
.hero-scrollcue {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 2.5rem;
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-text-light);
}
.hero-scrollcue .hero-scrollcue-track {
  position: relative;
  width: 22px;
  height: 34px;
  border: 1px solid var(--c-hairline);
  border-radius: 11px;
}
.hero-scrollcue .hero-scrollcue-dot {
  position: absolute;
  top: 6px;
  left: 50%;
  width: 3px;
  height: 6px;
  border-radius: 2px;
  background: #6f7df0;
  transform: translateX(-50%);
  animation: hero-scrolldot 1.8s ease-in-out infinite;
}
@media (max-width: 768px) {
  .hero-scrollcue {
    margin-top: 1.5rem;
  }
}

@keyframes hero-scrolldot {
  0% {
    opacity: 0;
    transform: translate(-50%, 0);
  }
  30% {
    opacity: 1;
  }
  70% {
    opacity: 1;
    transform: translate(-50%, 12px);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, 14px);
  }
}
/* ===========================================================
   Staggered entrance (plays on load; harmless without JS).
   =========================================================== */
.hero-eyebrow,
.hero-title .hero-line,
.hero-sub,
.hero-actions,
.hero-scrollcue {
  opacity: 0;
  transform: translateY(16px);
  animation: hero-rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero-eyebrow {
  animation-delay: 0.1s;
}

.hero-title .hero-line:nth-child(1) {
  animation-delay: 0.25s;
}

.hero-title .hero-line:nth-child(2) {
  animation-delay: 0.4s;
}

.hero-sub {
  animation-delay: 0.55s;
}

.hero-actions {
  animation-delay: 0.68s;
}

.hero-scrollcue {
  animation-delay: 0.8s;
}

@keyframes hero-rise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ---- Motion safety ---- */
@media (prefers-reduced-motion: reduce) {
  .hero-glow,
  .hero-scan,
  .hero-scrollcue-dot {
    animation: none !important;
  }
  .hero-eyebrow,
  .hero-title .hero-line,
  .hero-sub,
  .hero-actions,
  .hero-scrollcue {
    opacity: 1;
    transform: none;
    animation: none !important;
  }
}
/* ===========================================================
   About — "engineered precision": a schematic spec-panel.
   An editorial statement on the left; a blueprint-framed
   principle readout on the right. Continues the navbar/hero/
   footer language (grid texture, signal seam, mono labels).
   =========================================================== */
.about-section {
  position: relative;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding: clamp(3.5rem, 9vw, 6.5rem) 0;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--c-background);
}

/* ---- Atmospheric layers (subtler than the hero) ---- */
.about-grid {
  position: absolute;
  inset: 0;
  z-index: -3;
  background-image: linear-gradient(var(--c-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--c-grid-line) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 80% 50%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 90% at 80% 50%, #000 20%, transparent 75%);
}

.about-glow {
  position: absolute;
  inset: -30% -10%;
  z-index: -2;
  pointer-events: none;
  background: radial-gradient(34% 50% at 78% 42%, rgba(76, 94, 235, 0.22), transparent 70%);
  filter: blur(8px);
  animation: about-drift 20s ease-in-out infinite alternate;
}

@keyframes about-drift {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  100% {
    transform: translate3d(3%, -3%, 0) scale(1.08);
  }
}
/* ---- Layout ---- */
.about-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 880px) {
  .about-layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

/* ---- Left: editorial statement ---- */
.about-index {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0 0 1.25rem;
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6f7df0;
}
.about-index::before {
  content: "";
  width: 2.25rem;
  height: 1px;
  background: linear-gradient(90deg, #4C5EEB, #6f7df0);
}

.about-title {
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--c-text-main);
}

.about-line {
  display: block;
}
.about-line--muted {
  color: var(--c-text-muted);
}
.about-line--accent {
  background: linear-gradient(100deg, #4C5EEB 10%, #6f7df0 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.about-desc {
  max-width: 46ch;
  margin: 1.5rem 0 0;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--c-text-muted);
}

.about-cta {
  margin-top: 2rem;
}
.about-cta .icon {
  transition: transform 0.2s ease;
}
.about-cta:hover .icon {
  transform: translateX(4px);
}

/* ---- Right: schematic principle panel ---- */
.about-panel {
  position: relative;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--c-grid-line), transparent 60%), var(--c-surface-glass);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.about-panel::before {
  content: "";
  position: absolute;
  inset: -1px 18% auto 18%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #4C5EEB, #6f7df0, transparent);
  box-shadow: 0 0 14px rgba(76, 94, 235, 0.45);
}

.about-panel-tick {
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: #6f7df0;
  border-style: solid;
  border-width: 0;
  opacity: 0.7;
}
.about-panel-tick--tl {
  top: 10px;
  left: 10px;
  border-top-width: 1.5px;
  border-left-width: 1.5px;
}
.about-panel-tick--br {
  right: 10px;
  bottom: 10px;
  border-bottom-width: 1.5px;
  border-right-width: 1.5px;
}

.about-panel-head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding-bottom: 1.1rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--c-border);
}

.about-mark {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
}

.about-panel-label {
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-text-light);
}

.about-principles {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: principle;
}

.about-principle {
  display: flex;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--c-hairline);
}
.about-principle:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.about-principle-num {
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.6;
  color: #6f7df0;
}

.about-principle-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.about-principle-name {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--c-text-main);
}

.about-principle-desc {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--c-text-muted);
}

/* ---- Entrance: revealed on scroll-in (site.js adds .is-visible) ----
   Hidden only when JS is present, so the content stays visible as a
   no-JS / reduced-motion fallback. *.section-container == .about-layout. */
.js .about-statement > *,
.js .about-panel {
  opacity: 0;
  transform: translateY(16px);
}

.about-layout.is-visible .about-statement > *,
.about-layout.is-visible .about-panel {
  animation: about-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.about-layout.is-visible .about-index {
  animation-delay: 0.05s;
}
.about-layout.is-visible .about-title {
  animation-delay: 0.15s;
}
.about-layout.is-visible .about-desc {
  animation-delay: 0.25s;
}
.about-layout.is-visible .about-cta {
  animation-delay: 0.35s;
}
.about-layout.is-visible .about-panel {
  animation-delay: 0.3s;
}

@keyframes about-rise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .about-glow {
    animation: none !important;
  }
  .js .about-statement > *,
  .js .about-panel {
    opacity: 1;
    transform: none;
    animation: none !important;
  }
}
/* ===========================================================
   About page (/About) — "engineered precision".
   A standalone, multi-section narrative that mirrors the home
   sections' language (blueprint grid, drifting blue glow, mono
   indices, gradient headlines, schematic spec-panels, corner
   ticks, signal seams). All classes prefixed `ap-` to avoid
   collisions with the home `.about-*` / `.services-*` sections.
   Palette is BLUE ONLY (theme.$primary + theme.$primary-light).
   =========================================================== */
/* -----------------------------------------------------------
   Page root + section scaffolding
   ----------------------------------------------------------- */
.about-page {
  position: relative;
}

.ap-section {
  position: relative;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding: clamp(3.5rem, 9vw, 6.5rem) 0;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--c-background);
}
.ap-section--surface {
  background-color: var(--c-surface);
}

/* ---- Atmospheric layers (aria-hidden spans) ---- */
.ap-grid {
  position: absolute;
  inset: 0;
  z-index: -3;
  background-image: linear-gradient(var(--c-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--c-grid-line) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 80% 50%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 90% at 80% 50%, #000 20%, transparent 75%);
}
.ap-grid--left {
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 20% 50%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 90% at 20% 50%, #000 20%, transparent 75%);
}
.ap-grid--center {
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 25%, transparent 78%);
  mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 25%, transparent 78%);
}

.ap-glow {
  position: absolute;
  inset: -30% -10%;
  z-index: -2;
  pointer-events: none;
  background: radial-gradient(34% 50% at 78% 42%, rgba(76, 94, 235, 0.22), transparent 70%);
  filter: blur(8px);
  animation: ap-drift 20s ease-in-out infinite alternate;
}
.ap-glow--left {
  background: radial-gradient(34% 50% at 22% 55%, rgba(76, 94, 235, 0.2), transparent 70%);
  animation-duration: 22s;
}
.ap-glow--center {
  inset: -30% -10%;
  background: radial-gradient(40% 60% at 50% 48%, rgba(76, 94, 235, 0.28), transparent 70%), radial-gradient(60% 90% at 50% 50%, rgba(49, 49, 150, 0.16), transparent 72%);
  animation: ap-pulse 10s ease-in-out infinite alternate;
}

@keyframes ap-drift {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  100% {
    transform: translate3d(3%, -3%, 0) scale(1.08);
  }
}
@keyframes ap-pulse {
  0% {
    opacity: 0.78;
    transform: scale(1);
  }
  100% {
    opacity: 1;
    transform: scale(1.05);
  }
}
/* -----------------------------------------------------------
   Shared editorial primitives
   ----------------------------------------------------------- */
.ap-index {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0 0 1.25rem;
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6f7df0;
}
.ap-index::before {
  content: "";
  width: 2.25rem;
  height: 1px;
  background: linear-gradient(90deg, #4C5EEB, #6f7df0);
}

.ap-heading {
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--c-text-main);
  font-size: clamp(1.9rem, 4vw, 3rem);
}

.ap-line {
  display: block;
}
.ap-line--muted {
  color: var(--c-text-muted);
}
.ap-line--accent {
  background: linear-gradient(100deg, #4C5EEB 10%, #6f7df0 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ap-desc {
  max-width: 52ch;
  margin: 1.5rem 0 0;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--c-text-muted);
}

/* -----------------------------------------------------------
   Hero
   ----------------------------------------------------------- */
.ap-hero .ap-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 60ch;
}

.ap-hero-title {
  font-size: clamp(2.1rem, 5.5vw, 3.75rem);
  line-height: 1.05;
}

.ap-hero-sub {
  max-width: 50ch;
  margin: 1.5rem 0 0;
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--c-text-muted);
}

/* -----------------------------------------------------------
   History / Team — editorial statement beside a blueprint panel
   ----------------------------------------------------------- */
.ap-split {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.ap-split--reverse {
  grid-template-columns: 0.85fr 1.15fr;
}
.ap-split--reverse .ap-split-panel {
  order: -1;
}
@media (max-width: 880px) {
  .ap-split {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .ap-split--reverse .ap-split-panel {
    order: 0;
  }
}

/* ---- Schematic spec-panel ---- */
.ap-panel {
  position: relative;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--c-grid-line), transparent 60%), var(--c-surface-glass);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.ap-panel::before {
  content: "";
  position: absolute;
  inset: -1px 18% auto 18%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #4C5EEB, #6f7df0, transparent);
  box-shadow: 0 0 14px rgba(76, 94, 235, 0.45);
}

.ap-panel-tick {
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: #6f7df0;
  border-style: solid;
  border-width: 0;
  opacity: 0.7;
}
.ap-panel-tick--tl {
  top: 10px;
  left: 10px;
  border-top-width: 1.5px;
  border-left-width: 1.5px;
}
.ap-panel-tick--br {
  right: 10px;
  bottom: 10px;
  border-bottom-width: 1.5px;
  border-right-width: 1.5px;
}

.ap-panel-head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding-bottom: 1.1rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--c-border);
}

.ap-mark {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
}

.ap-panel-label {
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-text-light);
}

/* ---- Numbered readout list (values / spec rows) ---- */
.ap-readout {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ap-readout-row {
  display: flex;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--c-hairline);
}
.ap-readout-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.ap-readout-num {
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.6;
  color: #6f7df0;
}

.ap-readout-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.ap-readout-name {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--c-text-main);
}

.ap-readout-desc {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--c-text-muted);
}

/* ---- Panel as a quiet supporting note (history/team prose) ---- */
.ap-panel-note {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--c-text-muted);
}

/* -----------------------------------------------------------
   Mission band — centered statement, brighter glow
   ----------------------------------------------------------- */
.ap-band .ap-band-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 60ch;
  margin-inline: auto;
}

.ap-band .ap-index {
  justify-content: center;
}

.ap-band-statement {
  margin: 0.25rem 0 0;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--c-text-main);
  max-width: 24ch;
}
.ap-band-statement em {
  font-style: normal;
  background: linear-gradient(100deg, #4C5EEB 10%, #6f7df0 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* -----------------------------------------------------------
   Values — full-width schematic spec-panel
   ----------------------------------------------------------- */
.ap-values .ap-values-inner {
  position: relative;
  z-index: 1;
}

.ap-values-head {
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}

.ap-values .ap-readout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
@media (max-width: 760px) {
  .ap-values .ap-readout {
    grid-template-columns: 1fr;
  }
}

.ap-values .ap-readout-row {
  flex-direction: column;
  gap: 0.65rem;
  padding: clamp(1.25rem, 3vw, 1.85rem);
  border-bottom: 0;
  border-right: 1px solid var(--c-hairline);
}
.ap-values .ap-readout-row:last-child {
  border-right: 0;
}
@media (max-width: 760px) {
  .ap-values .ap-readout-row {
    border-right: 0;
    border-bottom: 1px solid var(--c-hairline);
    padding-inline: 0;
  }
  .ap-values .ap-readout-row:last-child {
    border-bottom: 0;
  }
}

.ap-values .ap-readout-name {
  font-size: 1.2rem;
}

/* -----------------------------------------------------------
   Closing CTA
   ----------------------------------------------------------- */
.ap-cta {
  margin-top: 2rem;
}
.ap-cta .icon {
  transition: transform 0.2s ease;
}
.ap-cta:hover .icon {
  transform: translateX(4px);
}

/* -----------------------------------------------------------
   Entrance: revealed on scroll-in.
   site.js adds `.is-visible` to each `.section-container`, so we
   gate every section's children off its own container. Hidden
   only when JS is present (no-JS / reduced-motion stays visible).
   ----------------------------------------------------------- */
.js .about-page .ap-reveal {
  opacity: 0;
  transform: translateY(16px);
}

.about-page .section-container.is-visible .ap-reveal {
  animation: ap-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.about-page .section-container.is-visible .ap-index {
  animation-delay: 0.05s;
}
.about-page .section-container.is-visible .ap-heading,
.about-page .section-container.is-visible .ap-band-statement {
  animation-delay: 0.15s;
}
.about-page .section-container.is-visible .ap-desc {
  animation-delay: 0.25s;
}
.about-page .section-container.is-visible .ap-cta {
  animation-delay: 0.35s;
}
.about-page .section-container.is-visible .ap-panel {
  animation-delay: 0.3s;
}
.about-page .section-container.is-visible .ap-values-head {
  animation-delay: 0.1s;
}
.about-page .section-container.is-visible .ap-readout-row {
  animation-delay: 0.25s;
}

@keyframes ap-rise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ap-glow {
    animation: none !important;
  }
  .js .about-page .ap-reveal {
    opacity: 1;
    transform: none;
    animation: none !important;
  }
}
/* ===========================================================
   Services — "engineered precision": an editorial statement
   beside a photo reframed as a technical-drawing figure
   (offset registration outline, corner brackets, signal seam,
   mono caption). Mirrors the about/hero/footer language.
   =========================================================== */
.services-section {
  position: relative;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding: clamp(3.5rem, 9vw, 6.5rem) 0;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--c-background);
}

/* ---- Atmospheric layers (biased to the text side, mirroring about) ---- */
.services-grid {
  position: absolute;
  inset: 0;
  z-index: -3;
  background-image: linear-gradient(var(--c-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--c-grid-line) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 20% 50%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 90% at 20% 50%, #000 20%, transparent 75%);
}

.services-glow {
  position: absolute;
  inset: -30% -10%;
  z-index: -2;
  pointer-events: none;
  background: radial-gradient(34% 50% at 22% 55%, rgba(76, 94, 235, 0.2), transparent 70%);
  filter: blur(8px);
  animation: services-drift 22s ease-in-out infinite alternate;
}

@keyframes services-drift {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  100% {
    transform: translate3d(-3%, 3%, 0) scale(1.08);
  }
}
/* ---- Layout ---- */
.services-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 992px) {
  .services-layout {
    grid-template-columns: 1fr;
    gap: 2.75rem;
  }
}

/* ---- Left: editorial statement ---- */
.services-index {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0 0 1.25rem;
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6f7df0;
}
.services-index::before {
  content: "";
  width: 2.25rem;
  height: 1px;
  background: linear-gradient(90deg, #4C5EEB, #6f7df0);
}

.services-title {
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--c-text-main);
}

.services-title-accent {
  background: linear-gradient(100deg, #4C5EEB 10%, #6f7df0 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.services-desc {
  max-width: 52ch;
  margin: 1.5rem 0 0;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--c-text-muted);
}

.services-cta {
  margin-top: 2rem;
}
.services-cta .icon {
  transition: transform 0.2s ease;
}
.services-cta:hover .icon {
  transform: translateX(4px);
}

/* ---- Right: the two "lanes" we build in (spec cards) ---- */
.services-lanes {
  display: grid;
  gap: 1.1rem;
}

.services-lane {
  position: relative;
  padding: 1.5rem 1.6rem 1.6rem;
  background: var(--c-surface-glass);
  border: 1px solid var(--c-border);
  border-left: 2px solid #4C5EEB;
  border-radius: 8px;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.services-lane::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 14px;
  height: 14px;
  border-top: 1.5px solid rgba(111, 125, 240, 0.55);
  border-right: 1.5px solid rgba(111, 125, 240, 0.55);
}
.services-lane:hover {
  transform: translateY(-3px);
  border-left-color: #6f7df0;
  box-shadow: 0 14px 34px var(--c-shadow);
}

.services-lane-tag {
  display: inline-block;
  margin-bottom: 0.6rem;
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: #6f7df0;
}

.services-lane-title {
  margin: 0 0 0.5rem;
  font-family: "Montserrat", sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--c-text-main);
}

.services-lane-desc {
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.6;
  color: var(--c-text-muted);
}

/* ---- Entrance: revealed on scroll-in (site.js adds .is-visible) ---- */
.js .services-text > *,
.js .services-lanes > * {
  opacity: 0;
  transform: translateY(16px);
}

.services-layout.is-visible .services-text > *,
.services-layout.is-visible .services-lanes > * {
  animation: services-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.services-layout.is-visible .services-index {
  animation-delay: 0.05s;
}
.services-layout.is-visible .services-title {
  animation-delay: 0.15s;
}
.services-layout.is-visible .services-desc {
  animation-delay: 0.25s;
}
.services-layout.is-visible .services-cta {
  animation-delay: 0.35s;
}
.services-layout.is-visible .services-lanes > *:nth-child(1) {
  animation-delay: 0.22s;
}
.services-layout.is-visible .services-lanes > *:nth-child(2) {
  animation-delay: 0.32s;
}

@keyframes services-rise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .services-glow {
    animation: none !important;
  }
  .js .services-text > *,
  .js .services-lanes > * {
    opacity: 1;
    transform: none;
    animation: none !important;
  }
}
/* ===========================================================
   Services page (/Services) — "engineered precision".
   A hero statement section followed by a schematic catalog of
   six spec-panel service cards and a closing CTA. Mirrors the
   navbar/hero/about/services-section/footer language (grid
   texture, drifting glow, signal seam, mono labels, corner
   ticks). All classes are `sp-` prefixed to avoid collisions
   with the home-page `.services-*` section.
   =========================================================== */
/* ---- Shared full-bleed section shell ---- */
.services-page .sp-section {
  position: relative;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding: clamp(3.5rem, 9vw, 6.5rem) 0;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--c-background);
}
.services-page .sp-inner {
  position: relative;
  z-index: 1;
}

/* ---- Atmospheric layers ---- */
.sp-grid {
  position: absolute;
  inset: 0;
  z-index: -3;
  background-image: linear-gradient(var(--c-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--c-grid-line) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 80% 90% at 50% 40%, #000 20%, transparent 78%);
  mask-image: radial-gradient(ellipse 80% 90% at 50% 40%, #000 20%, transparent 78%);
}

.sp-glow {
  position: absolute;
  inset: -30% -10%;
  z-index: -2;
  pointer-events: none;
  background: radial-gradient(34% 50% at 30% 30%, rgba(76, 94, 235, 0.2), transparent 70%);
  filter: blur(8px);
  animation: sp-drift 20s ease-in-out infinite alternate;
}

.sp-glow--catalog {
  background: radial-gradient(36% 48% at 72% 60%, rgba(111, 125, 240, 0.16), transparent 72%);
  animation-duration: 24s;
}

@keyframes sp-drift {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  100% {
    transform: translate3d(3%, -3%, 0) scale(1.08);
  }
}
/* ---- Hero statement ---- */
.sp-hero .sp-inner {
  max-width: 760px;
}

.sp-index {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0 0 1.25rem;
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6f7df0;
}
.sp-index::before {
  content: "";
  width: 2.25rem;
  height: 1px;
  background: linear-gradient(90deg, #4C5EEB, #6f7df0);
}

.sp-title {
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--c-text-main);
}

.sp-title-accent {
  background: linear-gradient(100deg, #4C5EEB 10%, #6f7df0 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.sp-lead {
  max-width: 56ch;
  margin: 1.25rem 0 0;
  font-size: 1.15rem;
  line-height: 1.65;
  color: var(--c-text-muted);
}

.sp-intro {
  max-width: 60ch;
  margin: 1.75rem 0 0;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--c-text-muted);
}
.sp-intro strong {
  color: var(--c-text-main);
  font-weight: 600;
}

/* ---- Catalog header ---- */
.sp-catalog-head {
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.sp-section-label {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0 0 1rem;
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6f7df0;
}
.sp-section-label::before {
  content: "";
  width: 2.25rem;
  height: 1px;
  background: linear-gradient(90deg, #4C5EEB, #6f7df0);
}

.sp-catalog-title {
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--c-text-main);
}

/* ---- Service card grid ---- */
.sp-grid-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.1rem, 2.2vw, 1.6rem);
}
@media (max-width: 900px) {
  .sp-grid-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .sp-grid-cards {
    grid-template-columns: 1fr;
  }
}

/* ---- Spec-panel card ---- */
.sp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--c-grid-line), transparent 60%), var(--c-surface-glass);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.sp-card::before {
  content: "";
  position: absolute;
  inset: -1px 22% auto 22%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #4C5EEB, #6f7df0, transparent);
  box-shadow: 0 0 14px rgba(76, 94, 235, 0.45);
  opacity: 0.6;
  transition: opacity 0.25s ease;
}
.sp-card:hover {
  transform: translateY(-4px);
  border-color: rgba(111, 125, 240, 0.45);
  box-shadow: 0 18px 40px rgba(76, 94, 235, 0.18);
}
.sp-card:hover::before {
  opacity: 1;
}
.sp-card:hover .sp-card-icon {
  color: #6f7df0;
  border-color: rgba(111, 125, 240, 0.55);
}

.sp-card-tick {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 14px;
  height: 14px;
  border-top: 1.5px solid #6f7df0;
  border-right: 1.5px solid #6f7df0;
  opacity: 0.7;
  pointer-events: none;
}

.sp-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
}

.sp-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  background: rgba(76, 94, 235, 0.12);
  color: #4C5EEB;
  font-size: 1.25rem;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.sp-card-num {
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--c-text-light);
}

.sp-card-title {
  margin: 0 0 0.6rem;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.25;
  color: var(--c-text-main);
}

.sp-card-desc {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--c-text-muted);
}

/* ---- Two-lane layout (replaces the six-card grid) ---- */
.sp-lanes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.1rem, 2.2vw, 1.6rem);
}
@media (max-width: 760px) {
  .sp-lanes {
    grid-template-columns: 1fr;
  }
}

.sp-lane {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.6rem, 2.6vw, 2.2rem);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--c-grid-line), transparent 60%), var(--c-surface-glass);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.sp-lane::before {
  content: "";
  position: absolute;
  inset: -1px 30% auto 0;
  height: 2px;
  background: linear-gradient(90deg, #4C5EEB, #6f7df0, transparent);
  box-shadow: 0 0 14px rgba(76, 94, 235, 0.45);
  opacity: 0.75;
  transition: opacity 0.25s ease;
}
.sp-lane:hover {
  transform: translateY(-4px);
  border-color: rgba(111, 125, 240, 0.45);
  box-shadow: 0 18px 40px rgba(76, 94, 235, 0.18);
}
.sp-lane:hover::before {
  opacity: 1;
}

.sp-lane-head {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  margin-bottom: 0.8rem;
}

.sp-lane-num {
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: #6f7df0;
}

.sp-lane-title {
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--c-text-main);
}

.sp-lane-desc {
  margin: 0 0 1.2rem;
  font-size: 0.97rem;
  line-height: 1.6;
  color: var(--c-text-muted);
}

.sp-lane-list {
  list-style: none;
  margin: auto 0 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}
.sp-lane-list li {
  position: relative;
  padding-left: 1.45rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--c-text-main);
}
.sp-lane-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.5em;
  width: 0.45rem;
  height: 0.78rem;
  border-right: 2px solid #6f7df0;
  border-bottom: 2px solid #6f7df0;
  transform: translateY(-65%) rotate(45deg);
}

/* ---- Integrations strip ---- */
.sp-integrations {
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  padding: clamp(1.4rem, 2.4vw, 1.9rem) clamp(1.6rem, 2.6vw, 2.2rem);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  background: var(--c-surface-glass);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.sp-int-label {
  margin: 0 0 0.5rem;
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6f7df0;
}

.sp-int-text {
  max-width: 62ch;
  margin: 0 0 1.2rem;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--c-text-muted);
}

.sp-int-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.sp-chip {
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  background: rgba(76, 94, 235, 0.1);
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--c-text-main);
}

.sp-chip--more {
  background: transparent;
  color: var(--c-text-light);
}

/* ---- Closing CTA ---- */
.sp-cta .sp-inner {
  max-width: 640px;
  text-align: center;
}

.sp-cta-text {
  max-width: 48ch;
  margin: 0 auto 0.5rem;
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--c-text-muted);
}

.sp-cta-btn .icon {
  transition: transform 0.2s ease;
}
.sp-cta-btn:hover .icon {
  transform: translateX(4px);
}

/* ---- Entrance: revealed on scroll-in (site.js adds .is-visible to
   each .section-container == our .sp-inner). Hidden only when JS is
   present, so content stays visible as a no-JS fallback. ---- */
.js .services-page .sp-index,
.js .services-page .sp-title,
.js .services-page .sp-lead,
.js .services-page .sp-intro,
.js .services-page .sp-catalog-head,
.js .services-page .sp-lane,
.js .services-page .sp-integrations,
.js .services-page .sp-cta-text,
.js .services-page .sp-cta-btn {
  opacity: 0;
  transform: translateY(16px);
}

.services-page .sp-inner.is-visible .sp-index,
.services-page .sp-inner.is-visible .sp-title,
.services-page .sp-inner.is-visible .sp-lead,
.services-page .sp-inner.is-visible .sp-intro,
.services-page .sp-inner.is-visible .sp-catalog-head,
.services-page .sp-inner.is-visible .sp-lane,
.services-page .sp-inner.is-visible .sp-integrations,
.services-page .sp-inner.is-visible .sp-cta-text,
.services-page .sp-inner.is-visible .sp-cta-btn {
  animation: sp-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.services-page .sp-inner.is-visible .sp-index {
  animation-delay: 0.05s;
}
.services-page .sp-inner.is-visible .sp-title {
  animation-delay: 0.15s;
}
.services-page .sp-inner.is-visible .sp-lead {
  animation-delay: 0.25s;
}
.services-page .sp-inner.is-visible .sp-intro {
  animation-delay: 0.35s;
}
.services-page .sp-inner.is-visible .sp-catalog-head {
  animation-delay: 0.05s;
}
.services-page .sp-inner.is-visible .sp-cta-text {
  animation-delay: 0.05s;
}
.services-page .sp-inner.is-visible .sp-cta-btn {
  animation-delay: 0.15s;
}
.services-page .sp-inner.is-visible .sp-lane:nth-child(1) {
  animation-delay: 0.12s;
}
.services-page .sp-inner.is-visible .sp-lane:nth-child(2) {
  animation-delay: 0.2s;
}
.services-page .sp-inner.is-visible .sp-integrations {
  animation-delay: 0.3s;
}

@keyframes sp-rise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .sp-glow {
    animation: none !important;
  }
  .js .services-page .sp-index,
  .js .services-page .sp-title,
  .js .services-page .sp-lead,
  .js .services-page .sp-intro,
  .js .services-page .sp-catalog-head,
  .js .services-page .sp-lane,
  .js .services-page .sp-integrations,
  .js .services-page .sp-cta-text,
  .js .services-page .sp-cta-btn {
    opacity: 1;
    transform: none;
    animation: none !important;
  }
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background-color: #4C5EEB;
  color: #ffffff;
  padding: 0.75rem 1.6rem;
  font-weight: 500;
  font-size: 1rem;
  text-decoration: none;
  margin-top: 1.5rem;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.btn .icon {
  margin-left: 0.4em;
  font-size: 1.1em;
}
.btn.btn-outlined {
  background-color: transparent;
  color: #4C5EEB;
  border-color: #4C5EEB;
}
.btn.btn-flat {
  background-color: transparent;
  color: #4C5EEB;
  border: none;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 4px 6px 24px rgba(76, 94, 235, 0.45);
  text-decoration: none;
}
.btn:active {
  transform: translateY(1px);
}
.btn-filled {
  background-color: #4C5EEB;
  color: #ffffff;
  border-color: #4C5EEB;
}
.btn-filled:hover {
  background-color: #313196;
  border-color: #313196;
  color: #ffffff;
}
.btn-outline {
  background-color: transparent;
  color: #4C5EEB;
  border-color: #4C5EEB;
}
.btn-outline:hover {
  background-color: #4C5EEB;
  color: #ffffff;
}

/* ===========================================================
   Contact — "engineered precision": a transmission-console CTA.
   The page's energy peak: a centered console framed by corner
   brackets over a converging blue glow, a pulsing status
   readout, gradient headline, prominent CTA, and an animated
   signal-transmission line. Mirrors the hero/about/footer.
   =========================================================== */
.contact-section {
  position: relative;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding: clamp(4.5rem, 11vw, 8rem) 0;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--c-background);
}
.contact-section::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #4C5EEB 25%, #6f7df0 75%, transparent);
  box-shadow: 0 0 18px rgba(76, 94, 235, 0.4);
  z-index: 2;
}

/* ---- Atmospheric layers (centered + brighter than other sections) ---- */
.contact-grid {
  position: absolute;
  inset: 0;
  z-index: -3;
  background-image: linear-gradient(var(--c-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--c-grid-line) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 25%, transparent 78%);
  mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 25%, transparent 78%);
}

.contact-glow {
  position: absolute;
  inset: -30% -10%;
  z-index: -2;
  pointer-events: none;
  background: radial-gradient(40% 60% at 50% 48%, rgba(76, 94, 235, 0.32), transparent 70%), radial-gradient(60% 90% at 50% 50%, rgba(49, 49, 150, 0.18), transparent 72%);
  filter: blur(8px);
  animation: contact-pulse 9s ease-in-out infinite alternate;
}

@keyframes contact-pulse {
  0% {
    opacity: 0.75;
    transform: scale(1);
  }
  100% {
    opacity: 1;
    transform: scale(1.06);
  }
}
/* ---- Console ----
   Scoped with .contact-section so the padding beats the layout's
   inline `.section-container { padding: 0 1rem }` (same element). */
.contact-section .contact-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(2.5rem, 6vw, 4rem) clamp(1rem, 4vw, 3rem);
  box-sizing: border-box;
}

.contact-bracket {
  position: absolute;
  width: 22px;
  height: 22px;
  border-color: #6f7df0;
  border-style: solid;
  border-width: 0;
  opacity: 0.7;
}
.contact-bracket--tl {
  top: 0;
  left: clamp(0px, 2vw, 1.5rem);
  border-top-width: 1.5px;
  border-left-width: 1.5px;
}
.contact-bracket--tr {
  top: 0;
  right: clamp(0px, 2vw, 1.5rem);
  border-top-width: 1.5px;
  border-right-width: 1.5px;
}
.contact-bracket--bl {
  bottom: 0;
  left: clamp(0px, 2vw, 1.5rem);
  border-bottom-width: 1.5px;
  border-left-width: 1.5px;
}
.contact-bracket--br {
  bottom: 0;
  right: clamp(0px, 2vw, 1.5rem);
  border-bottom-width: 1.5px;
  border-right-width: 1.5px;
}

/* ---- Status readout ---- */
.contact-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 0.7rem;
  max-width: 100%;
  margin: 0 0 1.5rem;
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6f7df0;
}
@media (max-width: 600px) {
  .contact-status {
    font-size: 0.66rem;
    letter-spacing: 0.1em;
  }
}

.contact-status-text {
  min-width: 0;
  overflow-wrap: break-word;
}

.contact-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #23d160;
  box-shadow: 0 0 0 0 rgba(35, 209, 96, 0.6);
  animation: contact-blink 2.4s ease-in-out infinite;
}

@keyframes contact-blink {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(35, 209, 96, 0.55);
    opacity: 1;
  }
  50% {
    box-shadow: 0 0 0 6px rgba(35, 209, 96, 0);
    opacity: 0.7;
  }
}
/* ---- Headline ---- */
.contact-title {
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: clamp(2.1rem, 5.5vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--c-text-main);
  max-width: 100%;
}

.contact-line {
  display: block;
}
.contact-line--muted {
  color: var(--c-text-muted);
}
.contact-line--accent {
  background: linear-gradient(100deg, #4C5EEB 10%, #6f7df0 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.contact-sub {
  max-width: 46ch;
  margin: 1.5rem 0 0;
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--c-text-muted);
}

/* ---- CTA ---- */
.contact-cta {
  margin-top: 2.25rem;
}
.contact-cta .icon {
  transition: transform 0.2s ease;
}
.contact-cta:hover .icon {
  transform: translate(3px, -3px);
}

/* ---- Transmission line ---- */
.contact-signal {
  position: relative;
  width: min(320px, 70%);
  height: 1px;
  margin-top: 3rem;
  background: linear-gradient(90deg, transparent, rgba(111, 125, 240, 0.35), transparent);
  overflow: hidden;
}
.contact-signal::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #6f7df0, transparent);
  box-shadow: 0 0 8px #6f7df0;
  animation: contact-transmit 3.2s linear infinite;
}

@keyframes contact-transmit {
  0% {
    transform: translateX(-60px);
  }
  100% {
    transform: translateX(min(320px, 70vw));
  }
}
/* ---- Entrance: revealed on scroll-in (site.js adds .is-visible) ---- */
.js .contact-inner > * {
  opacity: 0;
  transform: translateY(16px);
}

.contact-inner.is-visible > * {
  animation: contact-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.contact-inner.is-visible .contact-status {
  animation-delay: 0.05s;
}
.contact-inner.is-visible .contact-title {
  animation-delay: 0.15s;
}
.contact-inner.is-visible .contact-sub {
  animation-delay: 0.28s;
}
.contact-inner.is-visible .contact-cta {
  animation-delay: 0.4s;
}
.contact-inner.is-visible .contact-signal {
  animation-delay: 0.55s;
}
.contact-inner.is-visible .contact-bracket {
  animation: contact-fade 0.8s ease forwards;
}
.contact-inner.is-visible .contact-bracket--tl {
  animation-delay: 0.1s;
}
.contact-inner.is-visible .contact-bracket--tr {
  animation-delay: 0.18s;
}
.contact-inner.is-visible .contact-bracket--bl {
  animation-delay: 0.26s;
}
.contact-inner.is-visible .contact-bracket--br {
  animation-delay: 0.34s;
}

@keyframes contact-rise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes contact-fade {
  to {
    opacity: 0.7;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .contact-glow,
  .contact-status-dot,
  .contact-signal::after {
    animation: none !important;
  }
  .js .contact-inner > * {
    opacity: 1;
    transform: none;
    animation: none !important;
  }
  .contact-bracket {
    opacity: 0.7;
  }
}
/* ===========================================================
   Contact page (/Contact) — "engineered precision":
   a full-bleed transmission console housing the inquiry form.
   Mirrors the home _ContactSection / _AboutSection idioms but
   fully namespaced under .contact-page with `cp-` classes so it
   never collides with the home-page section styles.
   =========================================================== */
/* ---- Full-bleed section ---- */
.contact-page {
  position: relative;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding: clamp(4rem, 10vw, 7rem) 0;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--c-background);
}
.contact-page::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #4C5EEB 25%, #6f7df0 75%, transparent);
  box-shadow: 0 0 18px rgba(76, 94, 235, 0.4);
  z-index: 2;
}

/* ---- Atmospheric layers ---- */
.cp-grid {
  position: absolute;
  inset: 0;
  z-index: -3;
  background-image: linear-gradient(var(--c-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--c-grid-line) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 25%, transparent 78%);
  mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 25%, transparent 78%);
}

.cp-glow {
  position: absolute;
  inset: -30% -10%;
  z-index: -2;
  pointer-events: none;
  background: radial-gradient(40% 60% at 50% 40%, rgba(76, 94, 235, 0.3), transparent 70%), radial-gradient(60% 90% at 50% 50%, rgba(49, 49, 150, 0.16), transparent 72%);
  filter: blur(8px);
  animation: cp-pulse 9s ease-in-out infinite alternate;
}

@keyframes cp-pulse {
  0% {
    opacity: 0.7;
    transform: scale(1);
  }
  100% {
    opacity: 1;
    transform: scale(1.06);
  }
}
/* ---- Inner wrapper ----
   Scoped so its padding beats the layout's inline
   `.section-container { padding: 0 1rem }` on the same element. */
.contact-page .cp-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(2.25rem, 5vw, 3.5rem) clamp(1rem, 4vw, 2.5rem);
  box-sizing: border-box;
}

/* Corner brackets framing the whole console. */
.cp-bracket {
  position: absolute;
  width: 22px;
  height: 22px;
  border-color: #6f7df0;
  border-style: solid;
  border-width: 0;
  opacity: 0.7;
}
.cp-bracket--tl {
  top: 0;
  left: clamp(0px, 2vw, 1.5rem);
  border-top-width: 1.5px;
  border-left-width: 1.5px;
}
.cp-bracket--tr {
  top: 0;
  right: clamp(0px, 2vw, 1.5rem);
  border-top-width: 1.5px;
  border-right-width: 1.5px;
}
.cp-bracket--bl {
  bottom: 0;
  left: clamp(0px, 2vw, 1.5rem);
  border-bottom-width: 1.5px;
  border-left-width: 1.5px;
}
.cp-bracket--br {
  bottom: 0;
  right: clamp(0px, 2vw, 1.5rem);
  border-bottom-width: 1.5px;
  border-right-width: 1.5px;
}

/* ---- Status readout ---- */
.cp-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 0.7rem;
  max-width: 100%;
  margin: 0 0 1.4rem;
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6f7df0;
}
@media (max-width: 600px) {
  .cp-status {
    font-size: 0.66rem;
    letter-spacing: 0.1em;
  }
}

.cp-status-text {
  min-width: 0;
  overflow-wrap: break-word;
}

.cp-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #23d160;
  box-shadow: 0 0 0 0 rgba(35, 209, 96, 0.6);
  animation: cp-blink 2.4s ease-in-out infinite;
}

@keyframes cp-blink {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(35, 209, 96, 0.55);
    opacity: 1;
  }
  50% {
    box-shadow: 0 0 0 6px rgba(35, 209, 96, 0);
    opacity: 0.7;
  }
}
/* ---- Headline ---- */
.cp-title {
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: clamp(2.1rem, 5.5vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--c-text-main);
  max-width: 100%;
}

.cp-line {
  display: block;
}
.cp-line--muted {
  color: var(--c-text-muted);
}
.cp-line--accent {
  background: linear-gradient(100deg, #4C5EEB 10%, #6f7df0 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cp-sub {
  max-width: 50ch;
  margin: 1.4rem 0 0;
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--c-text-muted);
}

.cp-mailto {
  margin: 0.85rem 0 0;
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--c-text-light);
}
.cp-mailto a {
  color: #6f7df0;
  text-decoration: none;
  border-bottom: 1px solid rgba(111, 125, 240, 0.35);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.cp-mailto a:hover {
  color: var(--c-text-main);
  border-bottom-color: #6f7df0;
}

/* ---- Signal seam between header and console ---- */
.cp-signal {
  position: relative;
  width: min(320px, 70%);
  height: 1px;
  margin: 2.5rem 0 0;
  background: linear-gradient(90deg, transparent, rgba(111, 125, 240, 0.35), transparent);
  overflow: hidden;
}
.cp-signal::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #6f7df0, transparent);
  box-shadow: 0 0 8px #6f7df0;
  animation: cp-transmit 3.2s linear infinite;
}

@keyframes cp-transmit {
  0% {
    transform: translateX(-60px);
  }
  100% {
    transform: translateX(min(320px, 70vw));
  }
}
/* ---- Console panel housing the form ---- */
.cp-panel {
  position: relative;
  width: 100%;
  max-width: 680px;
  box-sizing: border-box;
  margin: 2.5rem auto 0;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  text-align: left;
  border: 1px solid var(--c-border);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--c-grid-line), transparent 60%), var(--c-surface-glass);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.cp-panel::before {
  content: "";
  position: absolute;
  inset: -1px 18% auto 18%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #4C5EEB, #6f7df0, transparent);
  box-shadow: 0 0 14px rgba(76, 94, 235, 0.45);
}

/* Blueprint corner ticks on the panel. */
.cp-tick {
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: #6f7df0;
  border-style: solid;
  border-width: 0;
  opacity: 0.7;
}
.cp-tick--tl {
  top: 10px;
  left: 10px;
  border-top-width: 1.5px;
  border-left-width: 1.5px;
}
.cp-tick--br {
  right: 10px;
  bottom: 10px;
  border-bottom-width: 1.5px;
  border-right-width: 1.5px;
}

.cp-panel-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-bottom: 1.1rem;
  margin-bottom: 1.4rem;
  border-bottom: 1px solid var(--c-border);
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-text-light);
}
.cp-panel-head::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: linear-gradient(90deg, #4C5EEB, #6f7df0);
}

/* ---- Engineered form inputs (scoped overrides; class names kept) ---- */
.contact-page .form-label {
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.contact-page .form-input {
  background-color: var(--c-bg-glass);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  color: var(--c-text-main);
}
.contact-page .form-input::placeholder {
  color: var(--c-text-light);
}
.contact-page .form-input:focus {
  border-color: #4C5EEB;
  box-shadow: 0 0 0 3px rgba(76, 94, 235, 0.25);
}

/* ---- Validation summary (preserves .validation-summary-errors markup) ---- */
.cp-errors {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 1.4rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(255, 56, 96, 0.4);
  border-left-width: 3px;
  border-radius: 8px;
  background: rgba(255, 56, 96, 0.08);
  color: #ff3860;
  font-size: 0.92rem;
}
.cp-errors .icon {
  margin-top: 0.15rem;
}

/* ---- Rate-limit notice ---- */
.cp-ratelimit {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  width: 100%;
  max-width: 680px;
  box-sizing: border-box;
  margin: 2rem auto 0;
  padding: 0.95rem 1.1rem;
  border: 1px solid rgba(255, 221, 87, 0.4);
  border-left-width: 3px;
  border-radius: 8px;
  background: rgba(255, 221, 87, 0.08);
  color: #ffdd57;
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;
  font-size: 0.9rem;
  line-height: 1.5;
  text-align: left;
}
.cp-ratelimit .icon {
  margin-top: 0.15rem;
}
.cp-ratelimit #countdown-timer {
  color: var(--c-text-main);
  font-weight: 600;
}

/* ---- CTA / submit ---- */
.cp-submit {
  margin-top: 0.5rem;
}
.cp-submit .icon {
  transition: transform 0.2s ease;
}
.cp-submit:hover .icon {
  transform: translate(3px, -3px);
}

.cp-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 1.75rem;
}

/* ---- Success confirmation state ---- */
.cp-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 680px;
  box-sizing: border-box;
  margin: 2.5rem auto 0;
  padding: clamp(2rem, 5vw, 3rem);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--c-grid-line), transparent 60%), var(--c-surface-glass);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.cp-success-icon {
  font-size: 3.25rem;
  color: #23d160;
  margin-bottom: 1.1rem;
}

.cp-success-title {
  margin: 0 0 0.75rem;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: clamp(1.6rem, 3.5vw, 2.25rem);
  color: var(--c-text-main);
}

.cp-success-text {
  margin: 0 0 1.75rem;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--c-text-muted);
}

/* ---- Entrance: revealed on scroll-in (site.js adds .is-visible to
   the .section-container, i.e. .cp-inner). Hidden ONLY when JS is
   present, so form/success/rate-limit content stays visible as a
   no-JS / reduced-motion fallback. ---- */
.js .contact-page .cp-inner > * {
  opacity: 0;
  transform: translateY(16px);
}

.contact-page .cp-inner.is-visible > * {
  animation: cp-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.contact-page .cp-inner.is-visible .cp-status {
  animation-delay: 0.05s;
}
.contact-page .cp-inner.is-visible .cp-title {
  animation-delay: 0.15s;
}
.contact-page .cp-inner.is-visible .cp-sub {
  animation-delay: 0.26s;
}
.contact-page .cp-inner.is-visible .cp-mailto {
  animation-delay: 0.34s;
}
.contact-page .cp-inner.is-visible .cp-signal {
  animation-delay: 0.42s;
}
.contact-page .cp-inner.is-visible .cp-panel,
.contact-page .cp-inner.is-visible .cp-success,
.contact-page .cp-inner.is-visible .cp-ratelimit {
  animation-delay: 0.5s;
}
.contact-page .cp-inner.is-visible .cp-bracket {
  animation: cp-fade 0.8s ease forwards;
}
.contact-page .cp-inner.is-visible .cp-bracket--tl {
  animation-delay: 0.1s;
}
.contact-page .cp-inner.is-visible .cp-bracket--tr {
  animation-delay: 0.18s;
}
.contact-page .cp-inner.is-visible .cp-bracket--bl {
  animation-delay: 0.26s;
}
.contact-page .cp-inner.is-visible .cp-bracket--br {
  animation-delay: 0.34s;
}

@keyframes cp-rise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes cp-fade {
  to {
    opacity: 0.7;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cp-glow,
  .cp-status-dot,
  .cp-signal::after {
    animation: none !important;
  }
  .js .contact-page .cp-inner > * {
    opacity: 1;
    transform: none;
    animation: none !important;
  }
  .cp-bracket {
    opacity: 0.7;
  }
}
.auth-page {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 68vh;
  padding: clamp(2.5rem, 8vh, 6rem) 0;
  background-color: var(--c-background);
}
.auth-page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: linear-gradient(var(--c-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--c-grid-line) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 32%, #000 18%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 32%, #000 18%, transparent 75%);
}
.auth-page::after {
  content: "";
  position: absolute;
  inset: -30% -10%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(34% 46% at 30% 24%, rgba(76, 94, 235, 0.24), transparent 70%), radial-gradient(38% 48% at 76% 78%, rgba(111, 125, 240, 0.16), transparent 72%);
  filter: blur(8px);
  animation: auth-drift 22s ease-in-out infinite alternate;
}

@keyframes auth-drift {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  100% {
    transform: translate3d(-2.5%, 2%, 0) scale(1.06);
  }
}
.auth-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
}

.auth-card {
  position: relative;
  width: 100%;
  max-width: 440px;
  padding: clamp(1.8rem, 4.5vw, 2.75rem);
  border: 1px solid var(--c-border);
  border-radius: 16px;
  background: linear-gradient(180deg, var(--c-grid-line), transparent 55%), var(--c-surface-glass);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 24px 60px var(--c-shadow);
  overflow: hidden;
}
.auth-card::before {
  content: "";
  position: absolute;
  inset: -1px 26% auto 26%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #4C5EEB, #6f7df0, transparent);
  box-shadow: 0 0 14px rgba(76, 94, 235, 0.45);
  opacity: 0.7;
}
.auth-card::after {
  content: "";
  position: absolute;
  top: 13px;
  right: 13px;
  width: 13px;
  height: 13px;
  border-top: 1.5px solid #6f7df0;
  border-right: 1.5px solid #6f7df0;
  opacity: 0.6;
  pointer-events: none;
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1.5rem;
}

.auth-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border: 1px solid rgba(76, 94, 235, 0.35);
  border-radius: 11px;
  background: rgba(76, 94, 235, 0.14);
}
.auth-brand-mark img {
  display: block;
  width: 26px;
  height: auto;
}

.auth-eyebrow {
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6f7df0;
}

.auth-title {
  margin: 0 0 0.4rem;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(1.7rem, 4vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--c-text-main);
}

.auth-sub {
  margin: 0 0 1.9rem;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--c-text-muted);
}

.auth-form {
  margin: 0;
}

.auth-card .form-group {
  margin-bottom: 1.25rem;
}
.auth-card .form-label {
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.auth-card .form-input {
  border-radius: 9px;
  border-color: var(--c-input-border);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.auth-card .form-input::placeholder {
  color: var(--c-text-light);
}
.auth-card .form-input:focus {
  border-color: #4C5EEB;
  box-shadow: 0 0 0 3px rgba(76, 94, 235, 0.22);
}

.auth-submit {
  width: 100%;
  margin-top: 0.6rem;
}
.auth-submit .icon {
  transition: transform 0.2s ease;
}
.auth-submit:hover .icon {
  transform: translateX(4px);
}

.auth-alt {
  margin-top: 1.4rem;
  text-align: center;
  color: var(--c-text-muted);
  font-size: 0.92rem;
}
.auth-alt a {
  color: #6f7df0;
  font-weight: 600;
  text-decoration: none;
}
.auth-alt a:hover {
  text-decoration: underline;
}

.auth-alt + .auth-alt {
  margin-top: 0.5rem;
}

.auth-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 1.7rem 0 0;
  padding-top: 1.3rem;
  border-top: 1px solid var(--c-hairline);
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-light);
}

.auth-note-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #23d160;
  box-shadow: 0 0 0 0 rgba(35, 209, 96, 0.5);
  animation: auth-note-pulse 2.6s ease-out infinite;
}

@keyframes auth-note-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(35, 209, 96, 0.5);
  }
  70% {
    box-shadow: 0 0 0 7px rgba(35, 209, 96, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(35, 209, 96, 0);
  }
}
.auth-errors {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin-bottom: 1.3rem;
  padding: 0.8rem 1rem;
  border-radius: 10px;
  font-size: 0.9rem;
  color: var(--c-text-main);
  background: rgba(255, 56, 96, 0.12);
  border: 1px solid rgba(255, 56, 96, 0.4);
}
.auth-errors .icon {
  flex: 0 0 auto;
  margin-top: 0.1rem;
  color: #ff3860;
}
.auth-errors ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.auth-confirm-icon,
.auth-error-icon {
  display: block;
  width: 2.6rem;
  height: 2.6rem;
  margin: 0 0 0.8rem;
}

.auth-confirm-icon {
  color: #23d160;
}

.auth-error-icon {
  color: #ff3860;
}

.js .auth-page .auth-card > * {
  opacity: 0;
  transform: translateY(14px);
}

.auth-wrap.is-visible .auth-card > * {
  animation: auth-rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.auth-wrap.is-visible .auth-card > *:nth-child(1) {
  animation-delay: 0.06s;
}
.auth-wrap.is-visible .auth-card > *:nth-child(2) {
  animation-delay: 0.13s;
}
.auth-wrap.is-visible .auth-card > *:nth-child(3) {
  animation-delay: 0.2s;
}
.auth-wrap.is-visible .auth-card > *:nth-child(4) {
  animation-delay: 0.27s;
}
.auth-wrap.is-visible .auth-card > *:nth-child(5) {
  animation-delay: 0.34s;
}
.auth-wrap.is-visible .auth-card > *:nth-child(6) {
  animation-delay: 0.41s;
}
.auth-wrap.is-visible .auth-card > *:nth-child(7) {
  animation-delay: 0.48s;
}

@keyframes auth-rise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .auth-page::after,
  .auth-note-dot {
    animation: none !important;
  }
  .js .auth-page .auth-card > * {
    opacity: 1;
    transform: none;
    animation: none !important;
  }
}
.demos-portal,
.admin-page,
.account-page {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(2rem, 6vh, 4rem) 0 clamp(3.5rem, 8vh, 6rem);
  background-color: var(--c-background);
}

.portal-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.portal-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(var(--c-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--c-grid-line) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 95% 65% at 50% 0%, #000 25%, transparent 80%);
  mask-image: radial-gradient(ellipse 95% 65% at 50% 0%, #000 25%, transparent 80%);
}

.portal-glow {
  position: absolute;
  inset: -30% -10%;
  background: radial-gradient(34% 48% at 16% 8%, rgba(76, 94, 235, 0.22), transparent 70%), radial-gradient(40% 50% at 90% 26%, rgba(111, 125, 240, 0.14), transparent 72%);
  filter: blur(8px);
  animation: portal-drift 24s ease-in-out infinite alternate;
}

@keyframes portal-drift {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  100% {
    transform: translate3d(2.5%, 2%, 0) scale(1.07);
  }
}
.demos-shell,
.admin-shell {
  position: relative;
  z-index: 1;
}

.console-bar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  padding: 0.85rem 1.15rem 0.85rem 1.35rem;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--c-grid-line), transparent 60%), var(--c-surface-glass);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  overflow: hidden;
}
.console-bar::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, #4C5EEB, #6f7df0);
  box-shadow: 0 0 12px rgba(76, 94, 235, 0.45);
}

.console-id {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.console-id-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  line-height: 1.2;
}

.console-eyebrow {
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6f7df0;
}

.console-email {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--c-text-main);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.console-dot {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #23d160;
  box-shadow: 0 0 0 0 rgba(35, 209, 96, 0.5);
  animation: console-pulse 2.6s ease-out infinite;
}
.console-dot--admin {
  background: #6f7df0;
  box-shadow: 0 0 0 0 rgba(76, 94, 235, 0.5);
  animation-name: console-pulse-admin;
}

@keyframes console-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(35, 209, 96, 0.5);
  }
  70% {
    box-shadow: 0 0 0 9px rgba(35, 209, 96, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(35, 209, 96, 0);
  }
}
@keyframes console-pulse-admin {
  0% {
    box-shadow: 0 0 0 0 rgba(76, 94, 235, 0.5);
  }
  70% {
    box-shadow: 0 0 0 9px rgba(76, 94, 235, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(76, 94, 235, 0);
  }
}
.console-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.55rem;
}
@media (max-width: 640px) {
  .console-actions {
    width: 100%;
  }
}

.console-role {
  display: inline-flex;
  align-items: center;
  padding: 0.32rem 0.7rem;
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  border: 1px solid var(--c-control-border);
  border-radius: 999px;
}
.console-role--admin {
  color: #6f7df0;
  border-color: rgba(76, 94, 235, 0.45);
  background: rgba(76, 94, 235, 0.1);
}

.console-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  background: transparent;
  border: 1px solid var(--c-control-border);
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.console-btn:hover {
  color: var(--c-text-main);
  border-color: #4C5EEB;
  background: rgba(76, 94, 235, 0.1);
  transform: translateY(-1px);
}
.console-btn--primary {
  color: #6f7df0;
  border-color: rgba(76, 94, 235, 0.45);
}

.console-signout {
  margin: 0;
  display: inline-flex;
}

.portal-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0 0 1rem;
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6f7df0;
}
.portal-eyebrow::before {
  content: "";
  width: 2.25rem;
  height: 1px;
  background: linear-gradient(90deg, #4C5EEB, #6f7df0);
}

.portal-head {
  margin: 2.4rem 0 2.2rem;
}

.portal-head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem 1.25rem;
}

.portal-title {
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--c-text-main);
}

.portal-count {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.25rem 0.7rem;
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  border: 1px solid var(--c-control-border);
  border-radius: 999px;
}
.portal-count strong {
  font-size: 0.9rem;
  font-weight: 700;
  color: #6f7df0;
}

.portal-sub {
  margin: 0.9rem 0 0;
  max-width: 60ch;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--c-text-muted);
}

.demos-grid {
  display: grid;
  gap: clamp(1.1rem, 2.2vw, 1.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 620px) {
  .demos-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 980px) {
  .demos-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.demo-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.3rem, 2.4vw, 1.7rem);
  text-decoration: none;
  color: var(--c-text-main);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--c-grid-line), transparent 55%), var(--c-surface-glass);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.demo-card::before {
  content: "";
  position: absolute;
  inset: -1px 24% auto 24%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #4C5EEB, #6f7df0, transparent);
  box-shadow: 0 0 14px rgba(76, 94, 235, 0.45);
  opacity: 0.55;
  transition: opacity 0.25s ease;
}
.demo-card:hover {
  transform: translateY(-4px);
  border-color: rgba(111, 125, 240, 0.45);
  box-shadow: 0 18px 40px rgba(76, 94, 235, 0.18);
}
.demo-card:hover::before {
  opacity: 1;
}
.demo-card:hover .demo-card-icon {
  color: #6f7df0;
  border-color: rgba(111, 125, 240, 0.55);
  background: rgba(76, 94, 235, 0.18);
}
.demo-card:hover .demo-card-go .icon {
  transform: translateX(4px);
}

.demo-card-tick {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 13px;
  height: 13px;
  border-top: 1.5px solid #6f7df0;
  border-right: 1.5px solid #6f7df0;
  opacity: 0.65;
  pointer-events: none;
}

.demo-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.05rem;
}

.demo-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  background: rgba(76, 94, 235, 0.12);
  color: #4C5EEB;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.demo-card-icon .icon {
  font-size: 1.2rem;
}

.demo-card-index {
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--c-text-light);
}

.demo-card-title {
  margin: 0 0 0.35rem;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.25;
  color: var(--c-text-main);
}

.demo-card-path {
  margin: 0 0 0.85rem;
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  color: var(--c-text-light);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-card-blurb {
  flex: 1;
  margin: 0 0 1.2rem;
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--c-text-muted);
}

.demo-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding-top: 0.95rem;
  border-top: 1px solid var(--c-hairline);
}

.demo-card-status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.demo-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-text-light);
}
.is-public .demo-status-dot {
  background: #23d160;
  box-shadow: 0 0 8px rgba(35, 209, 96, 0.6);
}
.is-private .demo-status-dot {
  background: #6f7df0;
  box-shadow: 0 0 8px rgba(76, 94, 235, 0.6);
}

.demo-card-go {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
  font-size: 0.86rem;
  color: #6f7df0;
}
.demo-card-go .icon {
  transition: transform 0.2s ease;
}

.demos-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: clamp(2.5rem, 6vw, 4rem) 1.5rem;
  text-align: center;
  border: 1px solid var(--c-border);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--c-grid-line), transparent 55%), var(--c-surface-glass);
}

.demos-empty-icon {
  width: 2.6rem;
  height: 2.6rem;
  margin-bottom: 0.4rem;
  color: var(--c-text-light);
  opacity: 0.7;
}

.demos-empty-label {
  margin: 0;
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6f7df0;
}

.demos-empty-text {
  margin: 0;
  max-width: 44ch;
  color: var(--c-text-muted);
}

.demos-request {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem 2rem;
  margin-top: 2.5rem;
  padding: clamp(1.6rem, 4vw, 2.2rem);
  border: 1px solid var(--c-border);
  border-radius: 16px;
  background: linear-gradient(120deg, rgba(76, 94, 235, 0.12), transparent 55%), var(--c-surface-glass);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  overflow: hidden;
}

.demos-request-text {
  flex: 1 1 320px;
}

.demos-request-eyebrow {
  margin: 0 0 0.5rem;
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6f7df0;
}

.demos-request-title {
  margin: 0 0 0.4rem;
  font-family: "Montserrat", sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--c-text-main);
}

.demos-request-body {
  margin: 0;
  max-width: 62ch;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--c-text-muted);
}

.demos-request-cta {
  flex-shrink: 0;
  margin-top: 0;
}
.demos-request-cta .icon {
  transition: transform 0.2s ease;
}
.demos-request-cta:hover .icon {
  transform: translateX(4px);
}

.admin-hero {
  margin: 2.4rem 0 2rem;
}

.admin-title {
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: clamp(1.8rem, 4.5vw, 2.6rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--c-text-main);
}

.admin-sub {
  margin: 0.8rem 0 0;
  max-width: 60ch;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--c-text-muted);
}

.admin-status {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.6rem;
  padding: 0.8rem 1.1rem;
  font-size: 0.92rem;
  color: var(--c-text-main);
  background: rgba(35, 209, 96, 0.12);
  border: 1px solid rgba(35, 209, 96, 0.4);
  border-radius: 10px;
}
.admin-status .icon {
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
  color: #23d160;
}

.admin-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.8rem, 2vw, 1.2rem);
  margin-bottom: 1.8rem;
}
@media (max-width: 560px) {
  .admin-stats {
    grid-template-columns: 1fr;
  }
}

.admin-stat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--c-grid-line), transparent 60%), var(--c-surface-glass);
  overflow: hidden;
}
.admin-stat::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: linear-gradient(180deg, #4C5EEB, #6f7df0);
  opacity: 0.7;
}

.admin-stat-num {
  font-family: "Montserrat", sans-serif;
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
  background: linear-gradient(100deg, #4C5EEB 10%, #6f7df0 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.admin-stat-label {
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.admin-panel {
  position: relative;
  margin-bottom: 1.5rem;
  padding: clamp(1.4rem, 3vw, 2.1rem);
  border: 1px solid var(--c-border);
  border-radius: 16px;
  background: linear-gradient(180deg, var(--c-grid-line), transparent 50%), var(--c-surface-glass);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  overflow: hidden;
}
.admin-panel::before {
  content: "";
  position: absolute;
  inset: -1px 30% auto 1.5rem;
  height: 1px;
  background: linear-gradient(90deg, #4C5EEB, #6f7df0, transparent);
  box-shadow: 0 0 12px rgba(76, 94, 235, 0.4);
  opacity: 0.6;
}

.panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.4rem;
}

.panel-kicker {
  margin: 0 0 0.25rem;
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6f7df0;
}

.panel-title {
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--c-text-main);
}

.panel-num {
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--c-text-light);
}

.admin-empty {
  margin: 0;
  color: var(--c-text-muted);
}

.admin-invite {
  max-width: 460px;
  margin: 0;
}

.admin-submit {
  margin-top: 0.5rem;
}
.admin-submit .icon {
  transition: transform 0.2s ease;
}
.admin-submit:hover .icon {
  transform: translateX(3px);
}

.admin-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.2rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--c-hairline);
  border-radius: 10px;
  background: var(--c-grid-line);
}

.admin-check {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.95rem;
  color: var(--c-text-main);
  cursor: pointer;
}
.admin-check input[type=checkbox] {
  width: 1rem;
  height: 1rem;
  accent-color: #4C5EEB;
  cursor: pointer;
}

.admin-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--c-hairline);
  border-radius: 12px;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.admin-table th,
.admin-table td {
  padding: 0.7rem 0.9rem;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--c-hairline);
}
.admin-table thead th {
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-text-light);
  background: var(--c-grid-line);
  white-space: nowrap;
}
.admin-table tbody tr {
  transition: background 0.15s ease;
}
.admin-table tbody tr:last-child td {
  border-bottom: none;
}
.admin-table tbody tr:hover {
  background: rgba(76, 94, 235, 0.06);
}
.admin-table td form {
  margin: 0;
}

.admin-cell-mono {
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;
  font-size: 0.84rem;
  color: var(--c-text-main);
}

.role-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  border: 1px solid var(--c-control-border);
  border-radius: 999px;
}
.role-chip--admin {
  color: #6f7df0;
  border-color: rgba(76, 94, 235, 0.45);
  background: rgba(76, 94, 235, 0.1);
}

.admin-access-all {
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: #6f7df0;
}

.admin-tag {
  display: inline-block;
  margin-left: 0.45rem;
  padding: 0.12rem 0.45rem;
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffdd57;
  background: rgba(255, 221, 87, 0.15);
  border-radius: 4px;
}

.admin-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.32rem 0.7rem 0.32rem 0.6rem;
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--c-text-muted);
  background: transparent;
  border: 1px solid var(--c-control-border);
  border-radius: 7px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.admin-toggle .admin-toggle-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-text-light);
  transition: background 0.15s, box-shadow 0.15s;
}
.admin-toggle.is-on {
  color: #6f7df0;
  border-color: rgba(76, 94, 235, 0.45);
  background: rgba(76, 94, 235, 0.1);
}
.admin-toggle.is-on .admin-toggle-dot {
  background: #6f7df0;
  box-shadow: 0 0 7px rgba(76, 94, 235, 0.7);
}
.admin-toggle.is-on:hover {
  color: #ff3860;
  background: rgba(255, 56, 96, 0.14);
  border-color: rgba(255, 56, 96, 0.55);
}
.admin-toggle.is-on:hover .admin-toggle-dot {
  background: #ff3860;
  box-shadow: 0 0 7px rgba(255, 56, 96, 0.7);
}
.admin-toggle.is-off:hover {
  color: #6f7df0;
  border-color: #4C5EEB;
  background: rgba(76, 94, 235, 0.12);
}
.admin-toggle.is-off:hover .admin-toggle-dot {
  background: #6f7df0;
  box-shadow: 0 0 7px rgba(76, 94, 235, 0.7);
}

.js .demos-portal .console-bar,
.js .demos-portal .portal-head,
.js .demos-portal .admin-hero,
.js .demos-portal .admin-status,
.js .demos-portal .admin-stat,
.js .demos-portal .demo-card,
.js .demos-portal .admin-panel,
.js .demos-portal .demos-empty,
.js .demos-portal .demos-request,
.js .admin-page .console-bar,
.js .admin-page .portal-head,
.js .admin-page .admin-hero,
.js .admin-page .admin-status,
.js .admin-page .admin-stat,
.js .admin-page .demo-card,
.js .admin-page .admin-panel,
.js .admin-page .demos-empty,
.js .admin-page .demos-request {
  opacity: 0;
  transform: translateY(16px);
}

.demos-portal .section-container.is-visible .console-bar,
.demos-portal .section-container.is-visible .portal-head,
.demos-portal .section-container.is-visible .admin-hero,
.demos-portal .section-container.is-visible .admin-status,
.demos-portal .section-container.is-visible .admin-stat,
.demos-portal .section-container.is-visible .demo-card,
.demos-portal .section-container.is-visible .admin-panel,
.demos-portal .section-container.is-visible .demos-empty,
.demos-portal .section-container.is-visible .demos-request,
.admin-page .section-container.is-visible .console-bar,
.admin-page .section-container.is-visible .portal-head,
.admin-page .section-container.is-visible .admin-hero,
.admin-page .section-container.is-visible .admin-status,
.admin-page .section-container.is-visible .admin-stat,
.admin-page .section-container.is-visible .demo-card,
.admin-page .section-container.is-visible .admin-panel,
.admin-page .section-container.is-visible .demos-empty,
.admin-page .section-container.is-visible .demos-request {
  animation: portal-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.demos-portal .section-container.is-visible .console-bar,
.admin-page .section-container.is-visible .console-bar {
  animation-delay: 0.04s;
}
.demos-portal .section-container.is-visible .portal-head,
.demos-portal .section-container.is-visible .admin-hero,
.admin-page .section-container.is-visible .portal-head,
.admin-page .section-container.is-visible .admin-hero {
  animation-delay: 0.12s;
}
.demos-portal .section-container.is-visible .admin-status,
.admin-page .section-container.is-visible .admin-status {
  animation-delay: 0.16s;
}
.demos-portal .section-container.is-visible .admin-stat:nth-child(1),
.admin-page .section-container.is-visible .admin-stat:nth-child(1) {
  animation-delay: 0.18s;
}
.demos-portal .section-container.is-visible .admin-stat:nth-child(2),
.admin-page .section-container.is-visible .admin-stat:nth-child(2) {
  animation-delay: 0.24s;
}
.demos-portal .section-container.is-visible .admin-stat:nth-child(3),
.admin-page .section-container.is-visible .admin-stat:nth-child(3) {
  animation-delay: 0.3s;
}
.demos-portal .section-container.is-visible .demo-card:nth-child(1),
.admin-page .section-container.is-visible .demo-card:nth-child(1) {
  animation-delay: 0.2s;
}
.demos-portal .section-container.is-visible .demo-card:nth-child(2),
.admin-page .section-container.is-visible .demo-card:nth-child(2) {
  animation-delay: 0.27s;
}
.demos-portal .section-container.is-visible .demo-card:nth-child(3),
.admin-page .section-container.is-visible .demo-card:nth-child(3) {
  animation-delay: 0.34s;
}
.demos-portal .section-container.is-visible .demo-card:nth-child(4),
.admin-page .section-container.is-visible .demo-card:nth-child(4) {
  animation-delay: 0.41s;
}
.demos-portal .section-container.is-visible .demo-card:nth-child(5),
.admin-page .section-container.is-visible .demo-card:nth-child(5) {
  animation-delay: 0.48s;
}
.demos-portal .section-container.is-visible .demo-card:nth-child(6),
.admin-page .section-container.is-visible .demo-card:nth-child(6) {
  animation-delay: 0.55s;
}
.demos-portal .section-container.is-visible .demos-empty,
.admin-page .section-container.is-visible .demos-empty {
  animation-delay: 0.2s;
}
.demos-portal .section-container.is-visible .demos-request,
.admin-page .section-container.is-visible .demos-request {
  animation-delay: 0.3s;
}

.admin-page .section-container.is-visible .admin-panel:nth-of-type(1) {
  animation-delay: 0.34s;
}
.admin-page .section-container.is-visible .admin-panel:nth-of-type(2) {
  animation-delay: 0.42s;
}
.admin-page .section-container.is-visible .admin-panel:nth-of-type(3) {
  animation-delay: 0.5s;
}

@keyframes portal-rise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .portal-glow,
  .console-dot {
    animation: none !important;
  }
  .js .demos-portal .console-bar,
  .js .demos-portal .portal-head,
  .js .demos-portal .admin-hero,
  .js .demos-portal .admin-status,
  .js .demos-portal .admin-stat,
  .js .demos-portal .demo-card,
  .js .demos-portal .admin-panel,
  .js .demos-portal .demos-empty,
  .js .demos-portal .demos-request,
  .js .admin-page .console-bar,
  .js .admin-page .portal-head,
  .js .admin-page .admin-hero,
  .js .admin-page .admin-status,
  .js .admin-page .admin-stat,
  .js .admin-page .demo-card,
  .js .admin-page .admin-panel,
  .js .admin-page .demos-empty,
  .js .admin-page .demos-request {
    opacity: 1;
    transform: none;
    animation: none !important;
  }
}
.account-shell {
  position: relative;
  z-index: 1;
}

.account-grid {
  display: grid;
  gap: clamp(1rem, 2.2vw, 1.4rem);
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 860px) {
  .account-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .account-grid {
    grid-template-columns: 1fr;
  }
}

.account-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.4rem, 2.6vw, 1.9rem);
  margin: 0;
  text-decoration: none;
  color: var(--c-text-main);
  border: 1px solid var(--c-border);
  border-radius: 16px;
  background: linear-gradient(180deg, var(--c-grid-line), transparent 55%), var(--c-surface-glass);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.account-card::before {
  content: "";
  position: absolute;
  inset: -1px 26% auto 26%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #4C5EEB, #6f7df0, transparent);
  box-shadow: 0 0 14px rgba(76, 94, 235, 0.45);
  opacity: 0.55;
  transition: opacity 0.25s ease;
}
.account-card:hover {
  transform: translateY(-4px);
  border-color: rgba(111, 125, 240, 0.45);
  box-shadow: 0 18px 40px rgba(76, 94, 235, 0.18);
}
.account-card:hover::before {
  opacity: 1;
}
.account-card:hover .account-card-icon {
  color: #6f7df0;
  border-color: rgba(111, 125, 240, 0.55);
  background: rgba(76, 94, 235, 0.18);
}
.account-card:hover .account-card-go .icon,
.account-card:hover .account-card-go--btn .icon {
  transform: translateX(4px);
}

.account-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  margin-bottom: 1.05rem;
  border: 1px solid var(--c-border);
  border-radius: 11px;
  background: rgba(76, 94, 235, 0.12);
  color: #4C5EEB;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.account-card-icon .icon {
  font-size: 1.25rem;
}

.account-card-body {
  flex: 1;
}

.account-card-title {
  margin: 0 0 0.35rem;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.25;
  color: var(--c-text-main);
}

.account-card-desc {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--c-text-muted);
}

.account-card-go {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 1.1rem;
  padding-top: 0.95rem;
  border-top: 1px solid var(--c-hairline);
  font-weight: 600;
  font-size: 0.86rem;
  color: #6f7df0;
}
.account-card-go .icon {
  transition: transform 0.2s ease;
}

.account-card-go--btn {
  width: 100%;
  font: inherit;
  font-weight: 600;
  font-size: 0.86rem;
  cursor: pointer;
  background: transparent;
  border: none;
  border-top: 1px solid var(--c-hairline);
}

.account-card--feature {
  grid-column: 1/-1;
  flex-direction: row;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 1.8rem);
}
.account-card--feature .account-card-icon {
  width: 56px;
  height: 56px;
  margin-bottom: 0;
}
.account-card--feature .account-card-icon .icon {
  font-size: 1.5rem;
}
.account-card--feature .account-card-go {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  white-space: nowrap;
}
@media (max-width: 560px) {
  .account-card--feature {
    flex-direction: column;
    align-items: flex-start;
  }
  .account-card--feature .account-card-go {
    margin-top: 0.6rem;
  }
}

.account-card-count {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 1;
  letter-spacing: -0.01em;
  background: linear-gradient(100deg, #4C5EEB 10%, #6f7df0 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.account-card--signout {
  cursor: default;
}

.js .account-page .console-bar,
.js .account-page .portal-head,
.js .account-page .account-card {
  opacity: 0;
  transform: translateY(16px);
}

.account-page .section-container.is-visible .console-bar,
.account-page .section-container.is-visible .portal-head,
.account-page .section-container.is-visible .account-card {
  animation: portal-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.account-page .section-container.is-visible .console-bar {
  animation-delay: 0.04s;
}
.account-page .section-container.is-visible .portal-head {
  animation-delay: 0.12s;
}
.account-page .section-container.is-visible .account-card:nth-child(1) {
  animation-delay: 0.2s;
}
.account-page .section-container.is-visible .account-card:nth-child(2) {
  animation-delay: 0.28s;
}
.account-page .section-container.is-visible .account-card:nth-child(3) {
  animation-delay: 0.36s;
}
.account-page .section-container.is-visible .account-card:nth-child(4) {
  animation-delay: 0.44s;
}

@media (prefers-reduced-motion: reduce) {
  .js .account-page .console-bar,
  .js .account-page .portal-head,
  .js .account-page .account-card {
    opacity: 1;
    transform: none;
    animation: none !important;
  }
}
/* ===========================================================
   Privacy page (/Privacy) — "engineered precision".
   Reuses the shared atmospheric + editorial primitives from
   _about-page.scss (.ap-section / .ap-grid / .ap-glow /
   .ap-index / .ap-heading / .ap-line / .ap-desc). Only the
   legal "spec sheet" body typography is defined here, prefixed
   `pp-`. Palette is BLUE ONLY (theme.$primary family).
   =========================================================== */
.privacy-page {
  position: relative;
}

/* "Last updated" mono chip under the hero heading. */
.pp-updated {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 1.75rem 0 0;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-light);
}
.pp-updated::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #6f7df0;
  box-shadow: 0 0 8px rgba(76, 94, 235, 0.7);
}

/* Legal body — a single readable column laid out as a "spec sheet". */
.pp-body {
  position: relative;
  z-index: 1;
  max-width: 72ch;
}

.pp-block {
  padding: clamp(1.75rem, 4vw, 2.5rem) 0;
  border-bottom: 1px solid var(--c-hairline);
}
.pp-block:first-child {
  padding-top: 0;
}
.pp-block:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.pp-heading {
  margin: 0.35rem 0 1rem;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  letter-spacing: -0.01em;
  color: var(--c-text-main);
}

.pp-block p,
.pp-block li {
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--c-text-muted);
}

.pp-block p {
  margin: 0 0 1rem;
}
.pp-block p:last-child {
  margin-bottom: 0;
}

.pp-list {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}
.pp-list li {
  margin-bottom: 0.5rem;
}
.pp-list li:last-child {
  margin-bottom: 0;
}

.pp-block a {
  color: #6f7df0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pp-block a:hover {
  color: #4C5EEB;
}

.pp-block strong {
  color: var(--c-text-main);
  font-weight: 600;
}

/* ===========================================================
   Footer — pinned, collapsible "control panel" drawer
   Frosted translucent bar (like the navbar) pinned to the
   viewport bottom, blueprint grid, indigo signal seam, monospace
   technical labels. Collapsed to a peek by default; expands on
   hover. On touch / no-hover devices it falls back to a normal
   static footer at the end of the page.
   =========================================================== */
.site-footer {
  position: relative;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  color: var(--c-text-main);
  background: var(--c-bg-glass);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-top: 1px solid var(--c-hairline);
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, #4C5EEB 25%, #6f7df0 75%, transparent 100%);
  box-shadow: 0 0 18px rgba(76, 94, 235, 0.45);
  z-index: 2;
}

/* ---- Atmospheric layers ---- */
.footer-grid-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: linear-gradient(var(--c-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--c-grid-line) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 92%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 92%);
}

.footer-glow {
  position: absolute;
  top: -40%;
  right: -10%;
  width: 720px;
  height: 720px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(76, 94, 235, 0.24), rgba(111, 125, 240, 0.09) 45%, transparent 72%);
  filter: blur(8px);
}

/* ===========================================================
   Peek — the always-visible pinned handle
   =========================================================== */
.footer-peek-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 3.75rem;
  padding: 0.75rem 1rem;
}

.footer-brandmark {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  flex: none;
}
.footer-brandmark .footer-logo {
  height: 30px;
  width: auto;
  display: block;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease;
}
.footer-brandmark .footer-wordmark {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.01em;
  color: var(--c-text-main);
  line-height: 1;
}
.footer-brandmark .footer-wordmark em {
  font-style: normal;
  color: #6f7df0;
}
.footer-brandmark:hover .footer-logo {
  transform: scale(1.06) rotate(-3deg);
  filter: drop-shadow(0 4px 14px rgba(76, 94, 235, 0.5));
}

/* Expand affordance — desktop/hover only. */
.footer-expand-hint {
  display: none;
  align-items: center;
  gap: 0.6rem;
  margin-left: auto;
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-text-light);
}
.footer-expand-hint .footer-expand-chevron {
  font-size: 0.85em;
  color: #6f7df0;
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}

/* ---- Live status readout ---- */
.footer-status {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  padding: 0.4rem 0.85rem;
  border: 1px solid rgba(76, 94, 235, 0.3);
  border-radius: 999px;
  background: rgba(76, 94, 235, 0.08);
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6f7df0;
}
.footer-status .status-dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6f7df0;
  flex: none;
}
.footer-status .status-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #6f7df0;
  animation: footer-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@media (max-width: 600px) {
  .footer-status .status-label {
    display: none;
  }
  .footer-status {
    padding: 0.4rem;
  }
}

@keyframes footer-ping {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  75%, 100% {
    transform: scale(2.6);
    opacity: 0;
  }
}
/* ===========================================================
   Drawer — expandable content
   Uses the grid 0fr→1fr trick for smooth auto-height.
   Open by default (static fallback); collapsed in hover media.
   =========================================================== */
.footer-drawer {
  display: grid;
  grid-template-rows: 1fr;
}

.footer-drawer-inner {
  overflow: hidden;
  min-height: 0;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 4rem;
  padding: 1.75rem 0 2.5rem;
}
@media (max-width: 860px) {
  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem 3rem;
  }
}
@media (max-width: 560px) {
  .footer-top {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

.footer-tagline {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--c-text-muted);
  max-width: 320px;
  margin: 0;
}

/* ---- Indexed columns ---- */
.footer-heading {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.5rem;
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text-light);
}
.footer-heading .footer-index {
  color: #4C5EEB;
  font-weight: 700;
}
.footer-heading .footer-index::after {
  content: "";
  display: inline-block;
  width: 1.5rem;
  height: 1px;
  margin-left: 0.6rem;
  vertical-align: middle;
  background: linear-gradient(90deg, #4C5EEB, transparent);
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-links li {
  margin-bottom: 0.85rem;
}
.footer-links a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--c-text-muted);
  font-weight: 500;
  font-size: 0.95rem;
  transition: color 0.22s ease, transform 0.22s ease;
}
.footer-links a .link-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0;
  margin-right: 0;
  overflow: hidden;
  opacity: 0;
  color: #6f7df0;
  font-size: 0.85em;
  transition: width 0.25s ease, opacity 0.25s ease, margin-right 0.25s ease;
}
.footer-links a:hover, .footer-links a:focus-visible {
  color: var(--c-text-main);
  transform: translateX(2px);
  outline: none;
}
.footer-links a:hover .link-marker, .footer-links a:focus-visible .link-marker {
  width: 1.1em;
  margin-right: 0.5rem;
  opacity: 1;
}

/* ---- Bottom row ---- */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1.5rem 0 2rem;
  border-top: 1px solid var(--c-hairline);
}
@media (max-width: 480px) {
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }
}

.footer-copy {
  margin: 0;
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--c-text-light);
}
.footer-copy .copy-mark {
  color: var(--c-text-muted);
}
.footer-copy .copy-sep {
  margin: 0 0.5rem;
  color: #4C5EEB;
  opacity: 0.7;
}
.footer-copy .footer-legal-link {
  color: var(--c-text-light);
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-copy .footer-legal-link:hover, .footer-copy .footer-legal-link:focus-visible {
  color: #6f7df0;
}

.footer-lang {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--c-text-muted);
}
.footer-lang .footer-lang-icon {
  width: 0.95em;
  height: 0.95em;
  color: var(--c-text-light);
}
.footer-lang .footer-lang-sep {
  color: #4C5EEB;
  opacity: 0.6;
}
.footer-lang .footer-lang-link {
  text-decoration: none;
  color: var(--c-text-light);
  transition: color 0.22s ease;
}
.footer-lang .footer-lang-link:hover, .footer-lang .footer-lang-link:focus-visible {
  color: #6f7df0;
  outline: none;
}
.footer-lang .footer-lang-link.is-current {
  color: var(--c-text-main);
  font-weight: 600;
}

.footer-backtotop {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  transition: color 0.22s ease;
}
.footer-backtotop .backtotop-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--c-hairline);
  border-radius: 7px;
  transition: transform 0.25s ease, border-color 0.22s ease, background 0.22s ease, color 0.22s ease;
}
.footer-backtotop:hover, .footer-backtotop:focus-visible {
  color: var(--c-text-main);
  outline: none;
}
.footer-backtotop:hover .backtotop-icon, .footer-backtotop:focus-visible .backtotop-icon {
  transform: translateY(-3px);
  border-color: rgba(76, 94, 235, 0.55);
  background: rgba(76, 94, 235, 0.12);
  color: #6f7df0;
}

/* ===========================================================
   Hover-capable, wider screens: pin to viewport bottom and
   collapse to the peek; expand on hover / keyboard focus.
   =========================================================== */
@media (hover: hover) and (pointer: fine) {
  body {
    padding-bottom: 3.75rem;
  }
  .site-footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 900;
    display: flex;
    flex-direction: column-reverse;
    box-shadow: 0 -12px 40px var(--c-shadow);
  }
  .footer-drawer {
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.45s cubic-bezier(0.65, 0, 0.35, 1);
  }
  .site-footer:hover .footer-drawer,
  .site-footer:focus-within .footer-drawer {
    grid-template-rows: 1fr;
  }
  .footer-expand-hint {
    display: inline-flex;
  }
  .site-footer:hover .footer-expand-chevron,
  .site-footer:focus-within .footer-expand-chevron {
    transform: rotate(180deg);
  }
}
/* ---- Motion safety ---- */
@media (prefers-reduced-motion: reduce) {
  .site-footer,
  .site-footer * {
    animation: none !important;
    transition: none !important;
  }
}
/* Utilities */
.pl-3 {
  padding-left: 1rem;
}

.primary {
  color: #4C5EEB !important;
}

.bg-primary {
  background-color: #4C5EEB !important;
}

.primary-dark {
  color: #313196 !important;
}

.bg-primary-dark {
  background-color: #313196 !important;
}

.secondary {
  color: #4a4a4a !important;
}

.bg-secondary {
  background-color: #4a4a4a !important;
}

.accent {
  color: #00d1b2 !important;
}

.bg-accent {
  background-color: #00d1b2 !important;
}

.error {
  color: #ff3860 !important;
}

.bg-error {
  background-color: #ff3860 !important;
}

.warning {
  color: #ffdd57 !important;
}

.bg-warning {
  background-color: #ffdd57 !important;
}

.info {
  color: #209cee !important;
}

.bg-info {
  background-color: #209cee !important;
}

.success {
  color: #23d160 !important;
}

.bg-success {
  background-color: #23d160 !important;
}

.white {
  color: #ffffff !important;
}

.bg-white {
  background-color: #ffffff !important;
}

.black {
  color: #000000 !important;
}

.bg-black {
  background-color: #000000 !important;
}

.light-grey {
  color: var(--c-light-grey) !important;
}

.bg-light-grey {
  background-color: var(--c-light-grey) !important;
}

.grey {
  color: var(--c-grey) !important;
}

.bg-grey {
  background-color: var(--c-grey) !important;
}

.background {
  color: var(--c-background) !important;
}

.bg-background {
  background-color: var(--c-background) !important;
}

.surface {
  color: var(--c-surface) !important;
}

.bg-surface {
  background-color: var(--c-surface) !important;
}

html {
  font-size: 14px;
  position: relative;
  min-height: 100%;
}
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
  background-color: var(--c-background);
  color: var(--c-text-main);
}

/*# sourceMappingURL=site.css.map */