:root {
  --bg: #070809;
  --ink: #e7ece7;
  --muted: #a6b4a8;
  --muted-2: #97a699;
  --line: rgba(120, 255, 180, .13);
  --line-2: rgba(255, 255, 255, .07);
  --accent: #3dffa2;
  --accent-2: #1ee0ff;
  --panel: #0c0f0d;
  --panel-2: #0a0d0b;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Manrope', system-ui, sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.mono {
  font-family: 'JetBrains Mono', monospace;
}

.head {
  font-family: 'Chakra Petch', sans-serif;
}

a {
  text-decoration: none;
}

::selection {
  background: var(--accent);
  color: #04140c;
}

img {
  max-width: 100%;
}

/* ===== Fixed background field ===== */
.grid-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: linear-gradient(var(--line-2) 1px, transparent 1px), linear-gradient(90deg, var(--line-2) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: .55;
  mask-image: radial-gradient(circle at 80% 0%, #000 0%, transparent 60%);
}

.scan {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .55;
  background: radial-gradient(760px 460px at 82% -4%, rgba(61, 255, 162, .10), transparent 70%);
}

main,
nav,
footer {
  position: relative;
  z-index: 2;
}

.container-x {
  max-width: 1180px;
}

.eyebrow {
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .72rem;
  color: var(--accent);
}

.eyebrow::before {
  content: "// ";
  opacity: .55;
}

.label {
  font-family: 'JetBrains Mono', monospace;
  font-size: .74rem;
  letter-spacing: .16em;
  color: var(--muted-2);
  text-transform: uppercase;
}

/* ===== Nav ===== */
.navbar {
  padding: 1rem 0;
  border-bottom: 1px solid transparent;
  transition: .3s;
}

.navbar.scrolled {
  background: rgba(7, 8, 9, .85);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: flex;
  align-items: center;
  gap: .62rem;
  font-family: 'Chakra Petch';
  font-weight: 700;
  font-size: 1.16rem;
  letter-spacing: .02em;
  color: var(--ink);
}

.brand .glyph {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  position: relative;
  box-shadow: inset 0 0 12px rgba(61, 255, 162, .4);
}

.brand .glyph::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  border: 1px solid var(--accent-2);
}

.nav-link {
  color: var(--muted) !important;
  font-family: 'JetBrains Mono', monospace;
  font-size: .84rem;
  padding: .4rem .8rem !important;
  transition: color .2s;
}

.nav-link:hover,
.nav-link.active {
  color: var(--accent) !important;
}

.btn-sq {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  font-size: .82rem;
  border: 1px solid var(--accent);
  color: #04140c;
  background: var(--accent);
  border-radius: 4px;
  padding: .55rem 1.2rem;
  transition: .2s;
  display: inline-block;
}

.btn-sq:hover {
  background: transparent;
  color: var(--accent);
  box-shadow: 0 0 26px rgba(61, 255, 162, .3);
}

.btn-out {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  font-size: .82rem;
  border: 1px solid var(--line);
  color: var(--ink);
  background: transparent;
  border-radius: 4px;
  padding: .55rem 1.2rem;
  transition: .2s;
  display: inline-block;
}

.btn-out:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.navbar-toggler {
  border: 1px solid var(--accent);
  color: var(--accent);
}

.navbar-toggler:focus {
  box-shadow: none;
}

/* Bootstrap's default toggler icon uses a near-black stroke that is almost
   invisible on the dark nav — repaint it with the neon-green accent. */
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%233dffa2' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.4' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Mobile menu open state: at the top of the page the nav is transparent, so
   the expanded collapse would render straight over the page content with no
   backdrop. Give the open panel its own solid background regardless of scroll
   position. Scoped below the navbar-expand-lg (992px) breakpoint. */
@media (max-width: 991.98px) {
  .navbar-collapse.show {
    background: rgba(7, 8, 9, .97);
    backdrop-filter: blur(14px);
    border: 1px solid var(--line);
    border-radius: 8px;
    margin-top: .75rem;
    padding: .85rem 1rem;
  }
}

/* ===== Hero ===== */
.hero {
  display: flex;
  align-items: center;
  padding: 120px 0 0;
}

.hero h1 {
  font-family: 'Chakra Petch';
  font-size: clamp(2.05rem, 4.4vw, 3.2rem);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -.01em;
}

.hero h1 em {
  font-style: normal;
  color: var(--accent);
  text-shadow: 0 0 32px rgba(61, 255, 162, .4);
}

.hero .lead {
  color: var(--muted);
  font-size: 1.1rem;
  max-width: 32rem;
  line-height: 1.65;
}

.specline {
  font-family: 'JetBrains Mono', monospace;
  font-size: .78rem;
  color: var(--muted);
  display: flex;
  gap: 1.4rem;
  flex-wrap: wrap;
}

.specline b {
  color: var(--accent-2);
  font-weight: 600;
}

/* hypercube (tesseract) — home hero: two concentric wireframe cubes rotating in 3D */
.hcube {
  position: relative;
  aspect-ratio: 1;
  width: min(440px, 90%);
  margin: 0 auto;
  display: grid;
  place-items: center;
  perspective: 1100px;
  container-type: size;
  /* --e is the cube edge; everything below scales off it so the tesseract fills the box */
  --e: 62cqmin;
}

.hcube .tess {
  position: relative;
  width: var(--e);
  height: var(--e);
  transform-style: preserve-3d;
  animation: tess-spin 32s linear infinite;
}

.hcube .cube {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.hcube .cube.inner {
  transform: scale3d(.5, .5, .5);
}

.hcube .face {
  position: absolute;
  width: var(--e);
  height: var(--e);
  border: 1px solid rgba(61, 255, 162, .45);
  background: rgba(61, 255, 162, .035);
  box-shadow: inset 0 0 26px rgba(61, 255, 162, .06);
}

.hcube .cube.inner .face {
  border-color: rgba(30, 224, 255, .55);
  background: rgba(30, 224, 255, .05);
  box-shadow: inset 0 0 20px rgba(30, 224, 255, .08);
}

.hcube .f1 { transform: translateZ(calc(var(--e) / 2)); }
.hcube .f2 { transform: rotateY(180deg) translateZ(calc(var(--e) / 2)); }
.hcube .f3 { transform: rotateY(90deg) translateZ(calc(var(--e) / 2)); }
.hcube .f4 { transform: rotateY(-90deg) translateZ(calc(var(--e) / 2)); }
.hcube .f5 { transform: rotateX(90deg) translateZ(calc(var(--e) / 2)); }
.hcube .f6 { transform: rotateX(-90deg) translateZ(calc(var(--e) / 2)); }

/* 8 edges joining each outer-cube corner to its inner counterpart — the tesseract links */
.hcube .edge {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--e) * 0.4330);
  height: 1.5px;
  margin: -.75px 0 0 calc(var(--e) * -0.2165);
  background: linear-gradient(90deg, rgba(30, 224, 255, .6), rgba(61, 255, 162, .6));
}

.hcube .e1 { transform: rotateZ(45deg) rotateY(-35.264deg) translateX(calc(var(--e) * 0.6495)); }
.hcube .e2 { transform: rotateZ(45deg) rotateY(35.264deg) translateX(calc(var(--e) * 0.6495)); }
.hcube .e3 { transform: rotateZ(135deg) rotateY(-35.264deg) translateX(calc(var(--e) * 0.6495)); }
.hcube .e4 { transform: rotateZ(135deg) rotateY(35.264deg) translateX(calc(var(--e) * 0.6495)); }
.hcube .e5 { transform: rotateZ(-45deg) rotateY(-35.264deg) translateX(calc(var(--e) * 0.6495)); }
.hcube .e6 { transform: rotateZ(-45deg) rotateY(35.264deg) translateX(calc(var(--e) * 0.6495)); }
.hcube .e7 { transform: rotateZ(-135deg) rotateY(-35.264deg) translateX(calc(var(--e) * 0.6495)); }
.hcube .e8 { transform: rotateZ(-135deg) rotateY(35.264deg) translateX(calc(var(--e) * 0.6495)); }

.hcube .core {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, var(--accent), #0a3d28 70%);
  box-shadow: 0 0 44px rgba(61, 255, 162, .55);
  animation: pulse 3.6s ease-in-out infinite;
}

@keyframes tess-spin {
  to {
    transform: rotateX(360deg) rotateY(360deg);
  }
}

@keyframes pulse {

  0%,
  100% {
    transform: scale(1);
    opacity: .9;
  }

  50% {
    transform: scale(1.12);
    opacity: 1;
  }
}

/* ===== Sections ===== */
section {
  padding: 1.5rem 0;
  position: relative;
}

/* home: tighten the hero→services gap and keep ~40px above the capabilities band */
#services {
  padding-top: 40px;
}

#capabilities {
  padding-top: 40px;
}

.sec-head .label {
  display: block;
  margin-bottom: .9rem;
}

.sec-title {
  font-family: 'Chakra Petch';
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.08;
  font-weight: 700;
}

.sec-sub {
  color: var(--muted);
  font-size: 1.05rem;
  max-width: 44rem;
  line-height: 1.65;
}

.rule {
  height: 1px;
  background: linear-gradient(90deg, var(--line), transparent);
  border: 0;
  margin: 0;
}

/* who-it's-for trio */
.trio .t-k {
  font-family: 'Chakra Petch';
  font-size: 1.35rem;
  font-weight: 700;
}

.trio .t-l {
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-top: .3rem;
}

/* panels (principles) */
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2rem;
  height: 100%;
  position: relative;
  transition: .3s;
  overflow: hidden;
}

.panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
  border-top: 2px solid var(--accent);
  border-left: 2px solid var(--accent);
}

.panel:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
}

.panel .pico {
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  place-items: center;
  margin-bottom: 1.2rem;
  background: rgba(61, 255, 162, .05);
}

.panel .idx {
  font-family: 'JetBrains Mono', monospace;
  font-size: .74rem;
  color: var(--accent);
}

.panel h3 {
  font-family: 'Chakra Petch';
  font-size: 1.25rem;
  font-weight: 600;
  margin: .55rem 0 .5rem;
}

.panel p {
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.6;
  margin: 0;
}

.panel .bar {
  height: 3px;
  margin-top: 1.4rem;
  background: linear-gradient(90deg, var(--accent), transparent);
  border-radius: 2px;
}

/* capability band */
.cap-band {
  background: var(--panel-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.cap {
  text-align: center;
  padding: 1rem;
  position: relative;
}

.cap .v {
  font-family: 'Chakra Petch';
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1;
  color: var(--accent);
}

.cap .k {
  font-family: 'JetBrains Mono', monospace;
  font-size: .74rem;
  letter-spacing: .08em;
  color: var(--muted);
  margin-top: .6rem;
  line-height: 1.5;
}

.cap+.cap::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18%;
  height: 64%;
  width: 1px;
  background: var(--line-2);
}

/* product feature */
.feature {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 2.6rem;
  position: relative;
  overflow: hidden;
}

.feature::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  border-top: 2px solid var(--accent);
  border-left: 2px solid var(--accent);
}

.ptag {
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}

.soon {
  display: inline-block;
  margin-left: .6rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #04140c;
  background: var(--accent);
  border-radius: 100px;
  padding: .14rem .55rem;
  vertical-align: middle;
}

.soon.muted {
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
}

.feature h3 {
  font-family: 'Chakra Petch';
  font-weight: 700;
  font-size: 2.1rem;
  margin: .5rem 0 .4rem;
}

.feature .desc {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.65;
  max-width: 38rem;
}

.feat-list {
  list-style: none;
  padding: 0;
  margin: 1.4rem 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem .5rem;
}

.feat-list li {
  font-family: 'JetBrains Mono', monospace;
  font-size: .82rem;
  color: var(--ink);
  display: flex;
  gap: .55rem;
  align-items: flex-start;
}

.feat-list li::before {
  content: "+";
  color: var(--accent);
}

.promise {
  border-left: 2px solid var(--accent);
  padding: .4rem 0 .4rem 1rem;
  margin-top: 1.5rem;
  color: var(--muted);
  font-size: .96rem;
  line-height: 1.6;
  max-width: 40rem;
}

.go {
  font-family: 'JetBrains Mono', monospace;
  font-size: .82rem;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1.5rem;
}

.go .arr {
  transition: transform .3s;
}

a.go:hover .arr {
  transform: translateX(5px);
}

.prod-sm {
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  padding: 2rem;
  height: 100%;
  transition: .3s;
}

.prod-sm:hover {
  border-color: var(--line);
}

.prod-sm h4 {
  font-family: 'Chakra Petch';
  font-weight: 700;
  font-size: 1.5rem;
  margin: .4rem 0 .5rem;
}

.prod-sm p {
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.6;
  margin: 0;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 1.1rem 0;
}

.chips span {
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem;
  letter-spacing: .06em;
  color: var(--muted);
  border: 1px solid var(--line-2);
  border-radius: 100px;
  padding: .18rem .6rem;
}

/* compliance */
.compliance {
  background: var(--panel-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.comp-feat {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 2.2rem;
  position: relative;
  overflow: hidden;
}

.comp-feat::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  border-top: 2px solid var(--accent);
  border-left: 2px solid var(--accent);
}

.seal {
  display: flex;
  gap: .4rem;
  margin-top: 1.2rem;
}

.seal .s {
  flex: 1;
  height: 40px;
  border: 1px solid var(--line-2);
  border-radius: 5px;
  display: grid;
  place-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: .74rem;
  color: var(--muted-2);
}

.seal .s.on {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(61, 255, 162, .07);
}

.seal .s.target {
  box-shadow: 0 0 18px rgba(61, 255, 162, .3);
}

.comp {
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: 6px;
  padding: 1.5rem;
  height: 100%;
  transition: .3s;
}

.comp:hover {
  border-color: var(--accent);
}

.comp .code {
  font-family: 'JetBrains Mono', monospace;
  font-size: .74rem;
  letter-spacing: .06em;
  color: var(--accent);
}

.comp h3,
.comp h4 {
  font-family: 'Chakra Petch';
  font-weight: 600;
  font-size: 1.05rem;
  margin: .5rem 0 .45rem;
}

.comp p {
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.55;
  margin: 0;
}

/* network strip */
.netstrip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.netlink {
  display: block;
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  padding: 1.6rem 1.8rem;
  transition: .3s;
}

.netlink:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
}

.netlink .nn {
  font-family: 'Chakra Petch';
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--ink);
}

.netlink .nd {
  font-family: 'JetBrains Mono', monospace;
  font-size: .74rem;
  color: var(--accent);
  margin: .5rem 0 .7rem;
  display: flex;
  align-items: center;
  gap: .4rem;
}

.netlink .nx {
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.55;
  margin: 0;
}

.netlink .arr {
  transition: transform .3s;
}

.netlink:hover .arr {
  transform: translateX(4px);
}

/* contact */
.form-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 2.4rem;
}

.form-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .45rem;
}

.form-control,
.form-select {
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  color: var(--ink);
  border-radius: 5px;
  padding: .7rem .9rem;
  font-size: .95rem;
}

.form-control:focus,
.form-select:focus {
  background: var(--panel-2);
  border-color: var(--accent);
  color: var(--ink);
  box-shadow: 0 0 0 .18rem rgba(61, 255, 162, .14);
}

.form-control::placeholder {
  color: var(--muted-2);
}

.form-select option {
  background: #0c0f0d;
}

.contact-meta a {
  color: var(--ink);
}

.contact-meta a:hover {
  color: var(--accent);
}

.ci {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}

.ci .cico {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--accent);
}

.ci .k {
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.ci .v {
  font-size: 1rem;
  color: var(--ink);
}

.form-ok {
  display: none;
  border: 1px solid var(--accent);
  background: rgba(61, 255, 162, .07);
  border-radius: 6px;
  padding: 1rem 1.2rem;
  color: var(--accent);
  font-family: 'JetBrains Mono', monospace;
  font-size: .86rem;
}

/* footer */
footer {
  border-top: 1px solid var(--line);
  padding: 3.5rem 0 2.5rem;
}

footer .fnav a {
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: .84rem;
  margin-right: 1.4rem;
  transition: .2s;
}

footer .fnav a:hover {
  color: var(--accent);
}

footer .copy {
  color: var(--muted-2);
  font-size: .85rem;
}

footer .copy a {
  color: var(--muted);
}

/* back to top */
#toTop {
  position: fixed;
  right: 1.4rem;
  bottom: 1.4rem;
  z-index: 50;
  width: 46px;
  height: 46px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: rgba(7, 8, 9, .8);
  backdrop-filter: blur(8px);
  color: var(--accent);
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: .3s;
}

#toTop.show {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

#toTop:hover {
  border-color: var(--accent);
  box-shadow: 0 0 20px rgba(61, 255, 162, .25);
}

/* reveal */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: .8s cubic-bezier(.2, .7, .2, 1);
}

.reveal.in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion:reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hcube .tess {
    animation: none !important;
  }
}

@media (max-width:991px) {
  .cap+.cap::before {
    display: none;
  }

  .hero {
    min-height: auto;
  }

  .feat-list {
    grid-template-columns: 1fr;
  }

  .netstrip {
    grid-template-columns: 1fr;
  }
}