/* =========================================================
   AURENGIS V6 — NEURAL CIRCUIT EDITION
   Futuristic Enterprise Interface
   ========================================================= */

:root {

  --bg: #020304;
  --bg-2: #05070a;
  --bg-3: #080b0f;
  --bg-4: #0b0f14;

  --panel: rgba(8, 11, 15, 0.78);
  --panel-strong: rgba(9, 13, 18, 0.94);

  --text: #f2f4f5;
  --text-soft: #d0d6da;

  --muted: #89949d;
  --muted-2: #59656e;
  --muted-3: #3e484f;

  --line: rgba(255,255,255,0.075);
  --line-strong: rgba(255,255,255,0.15);

  --gold: #d5a94f;
  --gold-light: #ffe2a2;

  --green: #57ff9a;
  --green-soft: #4cca7e;

  --cyan: #82e9ff;
  --blue: #719cff;

  --violet: #9b86ff;

  --danger: #ff6d68;

  --shell: 1320px;

  --section-space: 145px;

  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 26px;

  --ease:
    cubic-bezier(.2, .75, .18, 1);

  --shadow:
    0 32px 100px rgba(0,0,0,.42);

  --glass:
    blur(22px);
}


/* =========================================================
   RESET
   ========================================================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
  background: var(--bg);
}


body {

  min-height: 100vh;

  overflow-x: hidden;

  background:
    radial-gradient(
      circle at 84% 9%,
      rgba(79,112,255,.06),
      transparent 28%
    ),
    radial-gradient(
      circle at 9% 70%,
      rgba(64,255,145,.025),
      transparent 27%
    ),
    radial-gradient(
      circle at 48% 40%,
      rgba(213,169,79,.025),
      transparent 35%
    ),
    var(--bg);

  color: var(--text);

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  -webkit-font-smoothing: antialiased;

  line-height: 1.5;

  cursor: none;
}


body.menu-open {
  overflow: hidden;
}


a {
  color: inherit;
  text-decoration: none;
}


button,
input,
textarea,
select {
  font: inherit;
}


button {
  color: inherit;
}


a,
button,
input,
textarea,
select {
  cursor: none;
}


img {
  display: block;
  max-width: 100%;
}


::selection {
  background: var(--green);
  color: #021308;
}


/* =========================================================
   SHARED LAYOUT
   ========================================================= */

.section-shell,
.nav-shell {

  width:
    min(
      calc(100% - 64px),
      var(--shell)
    );

  margin:
    0 auto;
}


.section {

  position: relative;

  padding:
    var(--section-space) 0;
}


.eyebrow {

  color: #6e7981;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: .24em;

  text-transform: uppercase;
}


.section-heading {

  display: grid;

  grid-template-columns:
    1.25fr .75fr;

  gap: 90px;

  align-items: end;

  margin-bottom: 70px;
}


.section-heading h2 {

  max-width: 880px;

  margin-top: 20px;

  font-size:
    clamp(
      42px,
      5vw,
      73px
    );

  line-height: 1.03;

  font-weight: 430;

  letter-spacing: -.052em;
}


.section-heading > p {

  max-width: 480px;

  color: var(--muted);

  font-size: 14px;

  line-height: 1.85;
}


/* =========================================================
   GLOBAL BACKGROUND SYSTEM
   ========================================================= */

.particle-canvas,
.circuit-canvas {

  position: fixed;

  inset: 0;

  width: 100%;

  height: 100%;

  pointer-events: none;
}


.particle-canvas {
  z-index: -6;
}


.circuit-canvas {
  z-index: -5;
}


.global-grid {

  position: fixed;

  inset: 0;

  z-index: -7;

  pointer-events: none;

  background-image:
    linear-gradient(
      rgba(255,255,255,.014)
      1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.014)
      1px,
      transparent 1px
    );

  background-size:
    74px 74px;

  mask-image:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.9),
      rgba(0,0,0,.32)
    );
}


.global-noise {

  position: fixed;

  inset: 0;

  z-index: 9995;

  pointer-events: none;

  opacity: .022;

  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}


.cursor-glow {

  position: fixed;

  z-index: -1;

  width: 520px;

  height: 520px;

  transform:
    translate(-50%, -50%);

  border-radius: 50%;

  pointer-events: none;

  background:
    radial-gradient(
      circle,
      rgba(87,255,154,.035),
      rgba(113,156,255,.022) 35%,
      transparent 68%
    );

  filter:
    blur(28px);
}


.global-scan {

  position: fixed;

  left: 0;

  right: 0;

  top: -240px;

  height: 180px;

  z-index: 9994;

  pointer-events: none;

  background:
    linear-gradient(
      to bottom,
      transparent,
      rgba(87,255,154,.018),
      transparent
    );

  animation:
    globalScanMove
    14s linear infinite;
}


@keyframes globalScanMove {

  to {
    top: 115vh;
  }

}


/* =========================================================
   CIRCUIT SECTION OVERLAYS
   ========================================================= */

.circuit-section {
  overflow: hidden;
}


.circuit-overlay {

  position: absolute;

  inset: 0;

  pointer-events: none;

  opacity: .3;

  background:
    linear-gradient(
      90deg,
      transparent 0 8%,
      rgba(87,255,154,.055) 8% 8.08%,
      transparent 8.08% 24%,
      rgba(87,255,154,.045) 24% 24.08%,
      transparent 24.08%
    ),
    linear-gradient(
      0deg,
      transparent 0 19%,
      rgba(87,255,154,.045) 19% 19.08%,
      transparent 19.08% 67%,
      rgba(87,255,154,.05) 67% 67.08%,
      transparent 67.08%
    );

  mask-image:
    linear-gradient(
      90deg,
      transparent,
      black 15%,
      black 85%,
      transparent
    );
}


.circuit-overlay::before {

  content: "";

  position: absolute;

  width: 170px;

  height: 1px;

  left: -180px;

  top: 19%;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--green),
      transparent
    );

  box-shadow:
    0 0 12px rgba(87,255,154,.45);

  animation:
    circuitPulseHorizontal
    9s linear infinite;
}


.circuit-overlay::after {

  content: "";

  position: absolute;

  width: 1px;

  height: 120px;

  left: 24%;

  top: -140px;

  background:
    linear-gradient(
      transparent,
      var(--green),
      transparent
    );

  box-shadow:
    0 0 12px rgba(87,255,154,.4);

  animation:
    circuitPulseVertical
    11s linear infinite;
}


@keyframes circuitPulseHorizontal {

  0% {
    left: -180px;
  }

  100% {
    left: 110%;
  }

}


@keyframes circuitPulseVertical {

  0% {
    top: -140px;
  }

  100% {
    top: 110%;
  }

}


.circuit-overlay-alt::before {
  top: 67%;
  animation-delay: -3s;
}


.circuit-overlay-wide::after {
  left: 78%;
  animation-delay: -6s;
}


/* =========================================================
   CINEMATIC LOADER
   ========================================================= */

.boot-loader {

  position: fixed;

  inset: 0;

  z-index: 20000;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  background:
    radial-gradient(
      circle at 50% 48%,
      rgba(87,255,154,.035),
      transparent 24%
    ),
    #010203;

  transition:
    opacity .75s ease,
    visibility .75s ease;
}


.boot-loader.hidden {

  opacity: 0;

  visibility: hidden;

  pointer-events: none;
}


.boot-circuit-grid {

  position: absolute;

  inset: 0;

  opacity: .32;

  background:
    linear-gradient(
      rgba(87,255,154,.025)
      1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(87,255,154,.025)
      1px,
      transparent 1px
    );

  background-size:
    56px 56px;

  animation:
    bootGridMove
    10s linear infinite;
}


@keyframes bootGridMove {

  to {
    background-position:
      56px 56px;
  }

}


.boot-core {

  width: 190px;

  height: 190px;

  position: relative;

  display: grid;

  place-items: center;
}


.boot-a {

  position: relative;

  z-index: 3;

  width: 72px;

  height: 88px;

  filter:
    drop-shadow(
      0 0 15px
      rgba(213,169,79,.3)
    );
}


.boot-a::before {

  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      135deg,
      #fff1c8,
      var(--gold) 45%,
      #8c6424
    );

  clip-path:
    polygon(
      50% 0,
      100% 100%,
      76% 100%,
      61% 67%,
      38% 67%,
      23% 100%,
      0 100%
    );
}


.boot-a span {

  position: absolute;

  width: 68%;

  height: 8px;

  left: 29%;

  top: 58%;

  background: #010203;

  transform:
    rotate(-12deg);
}


.boot-rings {

  position: absolute;

  inset: 0;
}


.boot-rings i {

  position: absolute;

  left: 50%;

  top: 50%;

  transform:
    translate(-50%, -50%);

  border-radius: 50%;

  border:
    1px solid
    rgba(87,255,154,.16);
}


.boot-rings i:nth-child(1) {

  width: 180px;

  height: 180px;

  animation:
    bootSpin
    5s linear infinite;
}


.boot-rings i:nth-child(2) {

  width: 136px;

  height: 136px;

  border-style: dashed;

  animation:
    bootSpinReverse
    4s linear infinite;
}


.boot-rings i:nth-child(3) {

  width: 96px;

  height: 96px;

  border-color:
    rgba(213,169,79,.28);
}


@keyframes bootSpin {

  to {

    transform:
      translate(-50%, -50%)
      rotate(360deg);
  }

}


@keyframes bootSpinReverse {

  to {

    transform:
      translate(-50%, -50%)
      rotate(-360deg);
  }

}


.boot-copy {

  width: min(360px, calc(100% - 50px));

  margin-top: 25px;

  text-align: center;
}


.boot-copy > span {

  display: block;

  color: var(--gold-light);

  font-size: 16px;

  letter-spacing: .32em;

  font-weight: 600;
}


.boot-copy > strong {

  display: block;

  margin-top: 12px;

  color: #68747c;

  font-size: 7px;

  letter-spacing: .2em;
}


.boot-progress {

  margin-top: 24px;

  display: flex;

  align-items: center;

  gap: 12px;
}


.boot-progress i {

  flex: 1;

  height: 2px;

  background:
    rgba(255,255,255,.06);
}


.boot-progress i b {

  width: 0;

  height: 100%;

  display: block;

  background:
    linear-gradient(
      90deg,
      var(--gold),
      var(--green)
    );

  box-shadow:
    0 0 12px
    rgba(87,255,154,.3);

  transition:
    width .15s linear;
}


.boot-progress span {

  width: 34px;

  color: #748089;

  font-size: 8px;

  text-align: right;
}


.boot-terminal {

  position: absolute;

  left: 34px;

  bottom: 28px;

  display: flex;

  flex-direction: column;

  gap: 5px;

  color: #3f4f47;

  font-size: 6px;

  letter-spacing: .16em;
}


/* =========================================================
   AURENGIS CUSTOM CURSOR
   ========================================================= */

.auren-cursor {

  position: fixed;

  left: 0;

  top: 0;

  width: 58px;

  height: 58px;

  z-index: 15000;

  pointer-events: none;

  transform:
    translate(-50%, -50%);

  will-change: transform;
}


.cursor-a {

  position: absolute;

  left: 50%;

  top: 50%;

  width: 20px;

  height: 27px;

  transform:
    translate(-50%, -50%);

  transition:
    transform .16s var(--ease),
    filter .16s ease;
}


.cursor-a::before {

  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      140deg,
      #fff1c7,
      var(--gold) 43%,
      #936723 78%
    );

  clip-path:
    polygon(
      50% 0,
      100% 100%,
      76% 100%,
      61% 67%,
      38% 67%,
      23% 100%,
      0 100%
    );

  filter:
    drop-shadow(
      0 0 7px
      rgba(213,169,79,.65)
    );
}


.cursor-a span {

  position: absolute;

  width: 14px;

  height: 4px;

  left: 7px;

  top: 16px;

  background:
    var(--bg);

  transform:
    rotate(-12deg);
}


.cursor-energy {

  position: absolute;

  left: 50%;

  top: 50%;

  width: 10px;

  height: 10px;

  transform:
    translate(-50%, -50%);

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(213,169,79,.5),
      transparent 70%
    );

  opacity: .5;

  transition:
    .2s ease;
}


.cursor-orbit {

  position: absolute;

  border-radius: 50%;

  transition:
    .2s var(--ease);
}


.orbit-one {

  inset: 8px;

  border:
    1px solid
    rgba(213,169,79,.26);

  animation:
    cursorOrbitOne
    4s linear infinite;
}


.orbit-two {

  inset: 3px;

  border:
    1px dashed
    rgba(255,255,255,.08);

  animation:
    cursorOrbitTwo
    7s linear infinite;
}


@keyframes cursorOrbitOne {

  to {
    transform: rotate(360deg);
  }

}


@keyframes cursorOrbitTwo {

  to {
    transform: rotate(-360deg);
  }

}


.cursor-tail {

  position: absolute;

  left: 0;

  top: 50%;

  width: 100%;

  height: 1px;

  transform:
    translateY(-50%);
}


.cursor-tail i {

  position: absolute;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(213,169,79,.5)
    );
}


.cursor-tail i:nth-child(1) {

  width: 18px;

  right: 44px;

  opacity: .7;
}


.cursor-tail i:nth-child(2) {

  width: 30px;

  right: 52px;

  opacity: .35;
}


.cursor-tail i:nth-child(3) {

  width: 42px;

  right: 60px;

  opacity: .15;
}


.auren-cursor.hover {

  width: 74px;

  height: 74px;
}


.auren-cursor.hover .cursor-a {

  transform:
    translate(-50%, -50%)
    rotate(12deg)
    scale(1.3);
}


.auren-cursor.hover .cursor-a::before {

  background:
    linear-gradient(
      135deg,
      #eafff1,
      var(--green),
      var(--cyan)
    );

  filter:
    drop-shadow(
      0 0 14px
      rgba(87,255,154,.75)
    );
}


.auren-cursor.hover .cursor-a span {
  background: #031008;
}


.auren-cursor.hover .orbit-one {

  border-color:
    rgba(87,255,154,.42);

  box-shadow:
    0 0 22px
    rgba(87,255,154,.12);
}


.auren-cursor.hover .cursor-energy {

  width: 30px;

  height: 30px;

  background:
    radial-gradient(
      circle,
      rgba(87,255,154,.25),
      transparent 70%
    );
}


.auren-cursor.clicking .cursor-a {

  transform:
    translate(-50%, -50%)
    rotate(-16deg)
    scale(.72);
}


.auren-cursor.clicking .orbit-one {

  transform:
    scale(.72)
    rotate(35deg);

  border-color:
    var(--cyan);
}


.auren-cursor.text-mode .cursor-a {

  opacity: .25;

  transform:
    translate(-50%, -50%)
    scale(.6);
}


.auren-cursor.text-mode .orbit-one {

  border-radius: 3px;

  transform:
    scale(.55, 1.15);
}


/* =========================================================
   HEADER
   ========================================================= */

.site-header {

  position: fixed;

  inset:
    0 0 auto 0;

  z-index: 1000;

  border-bottom:
    1px solid
    rgba(255,255,255,.055);

  background:
    rgba(2,3,4,.68);

  backdrop-filter:
    var(--glass);

  -webkit-backdrop-filter:
    var(--glass);

  transition:
    background .3s ease,
    border-color .3s ease;
}


.site-header.scrolled {

  background:
    rgba(2,3,4,.93);

  border-bottom-color:
    rgba(255,255,255,.08);
}


.nav-shell {

  height: 84px;

  display: flex;

  align-items: center;
}


.brand {

  display: flex;

  align-items: center;

  gap: 14px;
}


.brand-mark {

  width: 31px;

  height: 31px;

  position: relative;
}


.brand-mark::before {

  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      140deg,
      #ffe9b3,
      var(--gold),
      #906623
    );

  clip-path:
    polygon(
      50% 0,
      100% 100%,
      76% 100%,
      62% 67%,
      38% 67%,
      23% 100%,
      0 100%
    );

  filter:
    drop-shadow(
      0 0 8px
      rgba(213,169,79,.22)
    );
}


.brand-mark span {

  position: absolute;

  width: 22px;

  height: 5px;

  left: 10px;

  top: 19px;

  background:
    #050607;

  transform:
    rotate(-12deg);
}


.brand-copy {

  display: flex;

  flex-direction: column;
}


.brand-copy strong {

  font-size: 13px;

  letter-spacing: .23em;

  font-weight: 650;
}


.brand-copy small {

  margin-top: 3px;

  color: #5f6870;

  font-size: 6.5px;

  letter-spacing: .18em;
}


.desktop-nav {

  display: flex;

  gap: 31px;

  margin-left: auto;

  margin-right: 30px;
}


.desktop-nav a {

  position: relative;

  color: #808b94;

  font-size: 9px;

  letter-spacing: .06em;

  transition:
    color .2s ease;
}


.desktop-nav a::after {

  content: "";

  position: absolute;

  left: 0;

  right: 100%;

  bottom: -11px;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      var(--gold),
      var(--green)
    );

  transition:
    right .3s var(--ease);
}


.desktop-nav a:hover {
  color: #fff;
}


.desktop-nav a:hover::after {
  right: 0;
}


.nav-actions {

  display: flex;

  align-items: center;

  gap: 9px;
}


.nav-project {

  min-height: 40px;

  padding:
    0 17px;

  display: inline-flex;

  align-items: center;

  border:
    1px solid
    var(--line-strong);

  background:
    rgba(255,255,255,.012);

  color: #e8ecee;

  font-size: 9px;

  letter-spacing: .06em;

  transition:
    .25s var(--ease);
}


.nav-project:hover {

  border-color:
    rgba(87,255,154,.32);

  background:
    rgba(87,255,154,.025);

  box-shadow:
    0 0 30px
    rgba(87,255,154,.045);
}


/* =========================================================
   LANGUAGE SWITCHER
   ========================================================= */

.language-system {
  position: relative;
}


.language-button {

  min-width: 94px;

  height: 40px;

  padding:
    0 11px;

  display: flex;

  align-items: center;

  gap: 8px;

  border:
    1px solid
    var(--line-strong);

  background:
    rgba(255,255,255,.012);

  transition:
    .25s ease;
}


.language-button:hover {

  border-color:
    rgba(87,255,154,.28);

  background:
    rgba(87,255,154,.02);
}


.language-button svg {

  width: 11px;

  height: 11px;

  margin-left: 1px;
}


.language-live-dot,
.system-green-dot {

  width: 5px;

  height: 5px;

  display: inline-block;

  border-radius: 50%;

  background:
    var(--green);

  box-shadow:
    0 0 11px
    var(--green);
}


.language-flag {
  font-size: 14px;
}


#currentLanguage {

  font-size: 8px;

  font-weight: 700;

  letter-spacing: .12em;
}


.language-menu {

  position: absolute;

  top: 50px;

  right: 0;

  width: 430px;

  padding: 14px;

  border:
    1px solid
    rgba(255,255,255,.14);

  background:
    linear-gradient(
      150deg,
      rgba(9,13,18,.985),
      rgba(4,6,9,.99)
    );

  box-shadow:
    0 30px 110px
    rgba(0,0,0,.72);

  backdrop-filter:
    blur(30px);

  opacity: 0;

  visibility: hidden;

  transform:
    translateY(-9px)
    scale(.985);

  transform-origin:
    top right;

  transition:
    .22s var(--ease);
}


.language-menu.open {

  opacity: 1;

  visibility: visible;

  transform: none;
}


.language-menu-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding:
    5px 6px 14px;

  border-bottom:
    1px solid
    var(--line);
}


.language-menu-header div {

  display: flex;

  flex-direction: column;

  gap: 3px;
}


.language-menu-header span {

  color: #a0aab0;

  font-size: 8px;

  letter-spacing: .15em;
}


.language-menu-header small {

  color: #4d5961;

  font-size: 7px;
}


.language-menu-header i {

  width: 7px;

  height: 7px;

  border-radius: 50%;

  background:
    var(--green);

  box-shadow:
    0 0 14px
    var(--green);
}


.language-grid {

  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 5px;

  margin-top: 10px;
}


.language-option {

  min-height: 56px;

  padding:
    9px 10px;

  display: grid;

  grid-template-columns:
    28px 1fr 10px;

  align-items: center;

  gap: 8px;

  border: 1px solid transparent;

  background:
    rgba(255,255,255,.008);

  text-align: left;

  transition:
    .2s ease;
}


.language-option:hover {

  border-color:
    rgba(87,255,154,.14);

  background:
    linear-gradient(
      120deg,
      rgba(87,255,154,.035),
      rgba(213,169,79,.018)
    );
}


.language-option.active {

  border-color:
    rgba(87,255,154,.28);

  background:
    rgba(87,255,154,.04);
}


.language-option .flag {

  font-size: 18px;
}


.language-option div {

  display: flex;

  flex-direction: column;

  gap: 2px;
}


.language-option strong {

  font-size: 10px;

  font-weight: 550;
}


.language-option small {

  color: #65717a;

  font-size: 7px;

  letter-spacing: .12em;
}


.language-option > i {

  width: 5px;

  height: 5px;

  border-radius: 50%;

  border:
    1px solid
    #4c565d;
}


.language-option.active > i {

  border: 0;

  background:
    var(--green);

  box-shadow:
    0 0 10px
    var(--green);
}


.language-footer {

  margin-top: 10px;

  padding:
    12px 6px 4px;

  display: flex;

  align-items: center;

  gap: 8px;

  border-top:
    1px solid
    var(--line);
}


.language-footer small {

  color: #526069;

  font-size: 6px;

  letter-spacing: .14em;
}


/* =========================================================
   MOBILE MENU
   ========================================================= */

.mobile-menu-button {

  display: none;

  width: 40px;

  height: 40px;

  position: relative;

  border:
    1px solid
    var(--line-strong);

  background:
    rgba(255,255,255,.01);
}


.mobile-menu-button span {

  position: absolute;

  left: 11px;

  width: 17px;

  height: 1px;

  background:
    #fff;

  transition:
    .25s ease;
}


.mobile-menu-button span:first-child {
  top: 16px;
}


.mobile-menu-button span:last-child {
  top: 22px;
}


.mobile-menu-button.active span:first-child {

  transform:
    translateY(3px)
    rotate(45deg);
}


.mobile-menu-button.active span:last-child {

  transform:
    translateY(-3px)
    rotate(-45deg);
}


.mobile-nav {
  display: none;
}


/* =========================================================
   HERO
   ========================================================= */

.hero-section {

  min-height: 100vh;

  position: relative;

  overflow: hidden;

  display: flex;

  align-items: center;

  border-bottom:
    1px solid
    var(--line);
}


.hero-deep-grid {

  position: absolute;

  inset: 0;

  background-image:
    linear-gradient(
      rgba(87,255,154,.018)
      1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(87,255,154,.018)
      1px,
      transparent 1px
    );

  background-size:
    96px 96px;

  mask-image:
    radial-gradient(
      circle at 70% 46%,
      black,
      transparent 74%
    );
}


.hero-neural-lines {

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      90deg,
      transparent 0 12%,
      rgba(87,255,154,.025) 12% 12.08%,
      transparent 12.08% 38%,
      rgba(87,255,154,.02) 38% 38.08%,
      transparent 38.08% 72%,
      rgba(87,255,154,.025) 72% 72.08%,
      transparent 72.08%
    ),
    linear-gradient(
      0deg,
      transparent 0 18%,
      rgba(87,255,154,.022) 18% 18.08%,
      transparent 18.08% 64%,
      rgba(87,255,154,.025) 64% 64.08%,
      transparent 64.08%
    );
}


.hero-scan {

  position: absolute;

  width: 100%;

  height: 220px;

  left: 0;

  top: -230px;

  background:
    linear-gradient(
      transparent,
      rgba(87,255,154,.018),
      transparent
    );

  animation:
    heroScanMove
    10s linear infinite;
}


@keyframes heroScanMove {

  to {
    top: 110%;
  }

}


.hero-orbit {

  position: absolute;

  border-radius: 50%;

  border:
    1px solid
    rgba(213,169,79,.05);
}


.hero-orbit-one {

  width: 870px;

  height: 870px;

  right: -300px;

  top: 4%;

  animation:
    heroOrbitFloat
    14s ease-in-out infinite;
}


.hero-orbit-two {

  width: 610px;

  height: 610px;

  right: -165px;

  top: 19%;

  animation:
    heroOrbitFloat
    12s ease-in-out infinite reverse;
}


.hero-orbit-three {

  width: 340px;

  height: 340px;

  right: -30px;

  top: 33%;

  border-color:
    rgba(87,255,154,.05);
}


@keyframes heroOrbitFloat {

  50% {

    transform:
      translateY(-14px)
      rotate(3deg);
  }

}


.hero-layout {

  min-height: 100vh;

  padding-top: 125px;

  display: grid;

  grid-template-columns:
    1.08fr .92fr;

  gap: 80px;

  align-items: center;

  position: relative;

  z-index: 5;
}


.hero-status {

  display: flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 34px;

  color: #65717a;

  font-size: 7px;

  letter-spacing: .17em;
}


.hero-status i {

  width: 34px;

  height: 1px;

  background:
    #374149;
}


.hero-copy h1 {

  max-width: 930px;

  font-size:
    clamp(
      62px,
      7vw,
      112px
    );

  line-height: .91;

  font-weight: 420;

  letter-spacing: -.067em;
}


.hero-copy h1 span {
  display: block;
}


.hero-metal-text {

  background:
    linear-gradient(
      105deg,
      #747b7f 0%,
      #f9ecc8 26%,
      #d3a651 43%,
      #d2d8dc 59%,
      #697177 82%
    );

  background-size:
    240% auto;

  background-clip: text;

  -webkit-background-clip:
    text;

  -webkit-text-fill-color:
    transparent;

  animation:
    heroMetalFlow
    8s linear infinite;
}


@keyframes heroMetalFlow {

  to {
    background-position:
      240% center;
  }

}


.hero-description {

  max-width: 690px;

  margin-top: 34px;

  color: #9ba5ac;

  font-size: 16px;

  line-height: 1.82;
}


.hero-actions {

  margin-top: 39px;

  display: flex;

  gap: 11px;
}


.primary-action,
.secondary-action {

  min-height: 53px;

  min-width: 195px;

  padding:
    0 23px;

  display: inline-flex;

  align-items: center;

  justify-content: space-between;

  gap: 28px;

  border:
    1px solid
    var(--line-strong);

  font-size: 9px;

  letter-spacing: .06em;

  transition:
    .3s var(--ease);
}


.primary-action {

  border-color:
    transparent;

  color: #090907;

  background:
    linear-gradient(
      100deg,
      #fff2c8,
      #d1a248
    );

  box-shadow:
    0 16px 55px
    rgba(213,169,79,.14);
}


.primary-action:hover {

  box-shadow:
    0 20px 65px
    rgba(213,169,79,.23);
}


.secondary-action {

  background:
    rgba(255,255,255,.01);
}


.secondary-action:hover {

  border-color:
    rgba(87,255,154,.3);

  background:
    rgba(87,255,154,.025);
}


.hero-specifications {

  max-width: 820px;

  margin-top: 65px;

  padding-top: 20px;

  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 20px;

  border-top:
    1px solid
    rgba(255,255,255,.065);
}


.hero-specifications div {

  display: flex;

  flex-direction: column;

  gap: 5px;
}


.hero-specifications small {

  color: #4d5961;

  font-size: 6.5px;

  letter-spacing: .14em;
}


.hero-specifications strong {

  color: #849099;

  font-size: 8px;

  letter-spacing: .11em;

  font-weight: 600;
}


/* =========================================================
   HERO LOGO SYSTEM
   ========================================================= */

.hero-system {

  min-height: 680px;

  position: relative;

  display: grid;

  place-items: center;

  perspective: 1200px;
}


.hero-logo-frame {

  width:
    min(
      610px,
      100%
    );

  position: relative;

  z-index: 5;

  overflow: hidden;

  border:
    1px solid
    rgba(213,169,79,.15);

  background:
    rgba(5,7,9,.78);

  box-shadow:
    0 38px 120px
    rgba(0,0,0,.48);

  transform-style:
    preserve-3d;

  transition:
    transform .15s ease-out;
}


.hero-logo {

  width: 100%;

  opacity: .8;

  filter:
    contrast(1.04)
    saturate(.88);

  transform:
    scale(1.01);
}


.hero-logo-light {

  position: absolute;

  width: 480px;

  height: 480px;

  left: 50%;

  top: 50%;

  transform:
    translate(-50%, -50%);

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(213,169,79,.13),
      transparent 69%
    );

  filter:
    blur(40px);
}


.logo-reflection {

  position: absolute;

  inset: 0;

  z-index: 4;

  pointer-events: none;

  background:
    linear-gradient(
      115deg,
      transparent 15%,
      rgba(255,255,255,.09) 30%,
      transparent 44%
    );

  transform:
    translateX(-120%);

  animation:
    logoReflectionMove
    7s ease-in-out infinite;
}


@keyframes logoReflectionMove {

  45%,
  100% {

    transform:
      translateX(120%);
  }

}


.frame-corner {

  position: absolute;

  z-index: 6;

  width: 26px;

  height: 26px;

  pointer-events: none;
}


.corner-a {

  left: 12px;

  top: 12px;

  border-left:
    1px solid var(--green);

  border-top:
    1px solid var(--green);
}


.corner-b {

  right: 12px;

  top: 12px;

  border-right:
    1px solid var(--green);

  border-top:
    1px solid var(--green);
}


.corner-c {

  left: 12px;

  bottom: 12px;

  border-left:
    1px solid var(--gold);

  border-bottom:
    1px solid var(--gold);
}


.corner-d {

  right: 12px;

  bottom: 12px;

  border-right:
    1px solid var(--gold);

  border-bottom:
    1px solid var(--gold);
}


.logo-orbit {

  position: absolute;

  left: 50%;

  top: 50%;

  transform:
    translate(-50%, -50%);

  border-radius: 50%;
}


.orbit-a {

  width: 640px;

  height: 640px;

  border:
    1px solid
    rgba(213,169,79,.08);

  animation:
    logoOrbitA
    24s linear infinite;
}


.orbit-b {

  width: 500px;

  height: 500px;

  border:
    1px dashed
    rgba(87,255,154,.08);

  animation:
    logoOrbitB
    18s linear infinite;
}


.orbit-c {

  width: 380px;

  height: 380px;

  border:
    1px solid
    rgba(130,233,255,.06);

  animation:
    logoOrbitC
    13s linear infinite;
}


@keyframes logoOrbitA {

  to {

    transform:
      translate(-50%, -50%)
      rotate(360deg);
  }

}


@keyframes logoOrbitB {

  to {

    transform:
      translate(-50%, -50%)
      rotate(-360deg);
  }

}


@keyframes logoOrbitC {

  to {

    transform:
      translate(-50%, -50%)
      rotate(360deg);
  }

}


.logo-particle {

  position: absolute;

  width: 5px;

  height: 5px;

  z-index: 4;

  border-radius: 50%;

  background:
    var(--green);

  box-shadow:
    0 0 14px
    var(--green);

  animation:
    logoParticlePulse
    2.2s ease-in-out infinite;
}


.lp1 { left: 10%; top: 18%; }
.lp2 { right: 7%; top: 27%; animation-delay: -.4s; }
.lp3 { left: 18%; bottom: 13%; animation-delay: -.8s; }
.lp4 { right: 20%; bottom: 8%; animation-delay: -1.2s; }
.lp5 { left: 50%; top: 4%; animation-delay: -.6s; }
.lp6 { left: 4%; top: 50%; animation-delay: -1.5s; }
.lp7 { right: 4%; top: 55%; animation-delay: -1s; }
.lp8 { left: 51%; bottom: 3%; animation-delay: -1.8s; }


@keyframes logoParticlePulse {

  50% {

    transform:
      scale(1.8);

    opacity: .3;
  }

}


.logo-data-ray {

  position: absolute;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--green),
      transparent
    );

  box-shadow:
    0 0 12px
    rgba(87,255,154,.4);
}


.ray-one {

  width: 230px;

  right: 63%;

  top: 21%;

  animation:
    rayMoveOne
    5s linear infinite;
}


.ray-two {

  width: 180px;

  left: 61%;

  bottom: 22%;

  animation:
    rayMoveTwo
    6s linear infinite;
}


.ray-three {

  width: 150px;

  left: 50%;

  top: 6%;

  transform:
    rotate(90deg);

  animation:
    rayBlink
    4s ease-in-out infinite;
}


@keyframes rayMoveOne {

  0% {
    opacity: 0;
    transform:
      translateX(-30px);
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform:
      translateX(60px);
  }

}


@keyframes rayMoveTwo {

  0% {
    opacity: 0;
    transform:
      translateX(50px);
  }

  50% {
    opacity: .9;
  }

  100% {
    opacity: 0;
    transform:
      translateX(-40px);
  }

}


@keyframes rayBlink {

  50% {
    opacity: .2;
  }

}


.hero-system-tag {

  position: absolute;

  z-index: 7;

  padding:
    8px 10px;

  border:
    1px solid
    rgba(255,255,255,.09);

  background:
    rgba(3,5,7,.78);

  backdrop-filter:
    blur(14px);

  display: flex;

  flex-direction: column;

  gap: 2px;
}


.hero-system-tag span {

  color: #4d5961;

  font-size: 6px;

  letter-spacing: .14em;
}


.hero-system-tag b {

  color: #a4aeb4;

  font-size: 7px;

  letter-spacing: .08em;
}


.system-tag-one {
  left: 1%;
  top: 14%;
}


.system-tag-two {
  right: 0;
  top: 30%;
}


.system-tag-three {
  left: 5%;
  bottom: 16%;
}


.system-tag-four {
  right: 7%;
  bottom: 8%;
}


.hero-edge-data {

  position: absolute;

  right: 23px;

  bottom: 32px;

  z-index: 6;

  display: flex;

  align-items: center;

  gap: 11px;

  writing-mode:
    vertical-rl;

  color: #4b555c;

  font-size: 6px;

  letter-spacing: .17em;
}


.hero-edge-data i {

  width: 1px;

  height: 48px;

  background:
    linear-gradient(
      var(--green),
      transparent
    );
}


.scroll-indicator {

  position: absolute;

  left: 50%;

  bottom: 28px;

  z-index: 6;

  transform:
    translateX(-50%);

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 9px;
}


.scroll-indicator span {

  color: #49545c;

  font-size: 6px;

  letter-spacing: .17em;
}


.scroll-indicator i {

  width: 1px;

  height: 28px;

  background:
    linear-gradient(
      var(--green),
      transparent
    );

  animation:
    scrollIndicatorPulse
    2s ease-in-out infinite;
}


@keyframes scrollIndicatorPulse {

  50% {

    transform:
      translateY(6px);

    opacity: .35;
  }

}


/* =========================================================
   SIGNAL STRIP
   ========================================================= */

.signal-strip {

  height: 52px;

  overflow: hidden;

  display: flex;

  align-items: center;

  border-bottom:
    1px solid
    var(--line);

  background:
    #040608;
}


.signal-track {

  display: flex;

  align-items: center;

  gap: 24px;

  white-space: nowrap;

  color: #47525a;

  font-size: 6.5px;

  letter-spacing: .19em;

  animation:
    signalTrackMove
    34s linear infinite;
}


.signal-track i {

  width: 4px;

  height: 4px;

  border:
    1px solid
    #50645b;

  transform:
    rotate(45deg);
}


@keyframes signalTrackMove {

  to {

    transform:
      translateX(-50%);
  }

}


/* =========================================================
   MANIFESTO
   ========================================================= */

.manifesto-section {

  background:
    linear-gradient(
      180deg,
      #05070a,
      #030405
    );

  border-bottom:
    1px solid
    var(--line);
}


.manifesto-layout {

  display: grid;

  grid-template-columns:
    .22fr 1fr;

  gap: 90px;
}


.section-index {

  color: #47525a;

  font-size: 7px;

  letter-spacing: .16em;
}


.section-index i {

  width: 1px;

  height: 110px;

  display: block;

  margin-top: 15px;

  background:
    linear-gradient(
      var(--green),
      transparent
    );
}


.manifesto-copy {

  max-width: 1030px;
}


.manifesto-copy h2 {

  margin-top: 22px;

  font-size:
    clamp(
      44px,
      5.5vw,
      80px
    );

  line-height: 1.04;

  font-weight: 430;

  letter-spacing: -.052em;
}


.manifesto-copy > p:last-of-type {

  max-width: 790px;

  margin-top: 40px;

  color: var(--muted);

  font-size: 16px;

  line-height: 1.83;
}


.manifesto-data {

  margin-top: 60px;

  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  border-top:
    1px solid
    var(--line);

  border-left:
    1px solid
    var(--line);
}


.manifesto-data div {

  min-height: 130px;

  padding: 21px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  border-right:
    1px solid
    var(--line);

  border-bottom:
    1px solid
    var(--line);
}


.manifesto-data span {

  color: #414c53;

  font-size: 7px;
}


.manifesto-data strong {

  max-width: 170px;

  font-size: 12px;

  line-height: 1.45;

  font-weight: 450;
}


/* =========================================================
   WHY AURENGIS
   ========================================================= */

.why-section {

  background:
    #030507;
}


.why-grid {

  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  border-top:
    1px solid
    var(--line);

  border-left:
    1px solid
    var(--line);
}


.why-card {

  min-height: 320px;

  padding: 26px;

  position: relative;

  overflow: hidden;

  border-right:
    1px solid
    var(--line);

  border-bottom:
    1px solid
    var(--line);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.015),
      transparent
    );

  transition:
    border-color .25s ease,
    background .25s ease;
}


.why-card::before {

  content: "";

  position: absolute;

  inset: 0;

  opacity: 0;

  background:
    radial-gradient(
      circle at
      var(--mx,50%)
      var(--my,50%),

      rgba(87,255,154,.07),
      transparent 40%
    );

  transition:
    opacity .25s ease;
}


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


.why-card:hover {

  border-color:
    rgba(87,255,154,.13);

  background:
    rgba(87,255,154,.01);
}


.why-number {

  position: relative;

  color: #455159;

  font-size: 7px;

  letter-spacing: .13em;
}


.why-icon {

  width: 66px;

  height: 66px;

  margin-top: 50px;

  position: relative;

  border:
    1px solid
    rgba(87,255,154,.12);
}


.why-icon::before {

  content: "";

  position: absolute;

  inset: 15px;

  border:
    1px solid
    rgba(213,169,79,.22);

  transform:
    rotate(45deg);
}


.why-icon::after {

  content: "";

  position: absolute;

  width: 6px;

  height: 6px;

  left: 29px;

  top: 29px;

  background:
    var(--green);

  border-radius: 50%;

  box-shadow:
    0 0 13px
    var(--green);
}


.why-card h3 {

  position: relative;

  margin-top: 44px;

  font-size: 20px;

  line-height: 1.28;

  font-weight: 450;
}


.why-card p {

  position: relative;

  margin-top: 14px;

  color: var(--muted);

  font-size: 12px;

  line-height: 1.75;
}


/* =========================================================
   CAPABILITIES
   ========================================================= */

.capabilities-section {

  border-top:
    1px solid
    var(--line);

  border-bottom:
    1px solid
    var(--line);

  background:
    linear-gradient(
      180deg,
      #05070a,
      #030405
    );
}


.capability-grid {

  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  border-top:
    1px solid
    var(--line);

  border-left:
    1px solid
    var(--line);
}


.capability-card {

  min-height: 305px;

  padding: 25px;

  position: relative;

  overflow: hidden;

  transform-style:
    preserve-3d;

  border-right:
    1px solid
    var(--line);

  border-bottom:
    1px solid
    var(--line);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.015),
      transparent
    );

  transition:
    transform .14s ease-out,
    border-color .25s ease;
}


.capability-card::before {

  content: "";

  position: absolute;

  inset: 0;

  opacity: 0;

  background:
    radial-gradient(
      circle at
      var(--mx,50%)
      var(--my,50%),

      rgba(213,169,79,.08),
      transparent 40%
    );

  transition:
    opacity .2s ease;
}


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


.capability-card:hover {

  border-color:
    rgba(213,169,79,.16);
}


.capability-card > span {

  position: relative;

  color: #445058;

  font-size: 7px;

  letter-spacing: .13em;
}


.capability-glyph {

  width: 62px;

  height: 62px;

  margin-top: 45px;

  position: relative;

  border:
    1px solid
    rgba(255,255,255,.08);
}


.capability-glyph::before {

  content: "";

  position: absolute;

  left: 12px;

  right: 12px;

  top: 30px;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--green),
      transparent
    );
}


.capability-glyph::after {

  content: "";

  position: absolute;

  width: 5px;

  height: 5px;

  left: 28px;

  top: 28px;

  border-radius: 50%;

  background:
    var(--green);

  box-shadow:
    0 0 12px
    var(--green);
}


.capability-card h3 {

  position: relative;

  margin-top: 40px;

  font-size: 18px;

  line-height: 1.3;

  font-weight: 450;
}


.capability-card p {

  position: relative;

  margin-top: 13px;

  color: var(--muted);

  font-size: 11.5px;

  line-height: 1.7;
}


/* =========================================================
   TRANSFORMATION
   ========================================================= */

.transformation-section {

  background:
    #040608;

  border-bottom:
    1px solid
    var(--line);
}


.transformation-heading {

  max-width: 900px;

  margin-bottom: 70px;
}


.transformation-heading h2 {

  margin-top: 22px;

  font-size:
    clamp(
      43px,
      5vw,
      73px
    );

  line-height: 1.04;

  font-weight: 430;

  letter-spacing: -.052em;
}


.transformation-layout {

  display: grid;

  grid-template-columns:
    1fr .3fr 1fr;

  gap: 28px;

  align-items: stretch;

  perspective: 1200px;
}


.fragmented-system,
.integrated-system {

  min-height: 470px;

  padding: 30px;

  border:
    1px solid
    var(--line);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.014),
      transparent
    );

  transform-style:
    preserve-3d;
}


.state-label {

  display: flex;

  align-items: center;

  gap: 9px;

  font-size: 7px;

  letter-spacing: .16em;
}


.state-label span {

  width: 6px;

  height: 6px;

  border-radius: 50%;
}


.error-state {
  color: #7a5c5b;
}


.error-state span {

  background:
    var(--danger);

  box-shadow:
    0 0 10px
    rgba(255,109,104,.42);
}


.success-state {
  color: #637b6d;
}


.success-state span {

  background:
    var(--green);

  box-shadow:
    0 0 11px
    var(--green);
}


.fragment-nodes {

  margin-top: 55px;

  display: flex;

  flex-wrap: wrap;

  gap: 9px;
}


.fragment-nodes div {

  padding:
    11px 13px;

  border:
    1px solid
    rgba(255,255,255,.075);

  color: #7a848b;

  font-size: 10px;
}


.fragment-nodes div:nth-child(2n) {
  transform: rotate(1.5deg);
}


.fragment-nodes div:nth-child(3n) {
  transform: rotate(-1.5deg);
}


.fragment-warning {

  margin-top: 55px;

  padding-top: 18px;

  display: flex;

  align-items: center;

  gap: 10px;

  border-top:
    1px solid
    var(--line);
}


.fragment-warning span {

  width: 20px;

  height: 20px;

  display: grid;

  place-items: center;

  border:
    1px solid
    rgba(255,109,104,.22);

  color:
    var(--danger);

  font-size: 9px;
}


.fragment-warning small {

  color: #675654;

  font-size: 6px;

  letter-spacing: .14em;
}


.transformation-core {

  position: relative;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 15px;
}


.transformation-core-ring {

  position: absolute;

  width: 135px;

  height: 135px;

  border-radius: 50%;

  border:
    1px dashed
    rgba(87,255,154,.18);

  animation:
    transformCoreSpin
    12s linear infinite;
}


@keyframes transformCoreSpin {

  to {
    transform:
      rotate(360deg);
  }

}


.transformation-a {

  width: 76px;

  height: 76px;

  display: grid;

  place-items: center;

  border:
    1px solid
    rgba(213,169,79,.28);

  transform:
    rotate(45deg);

  color:
    var(--gold-light);

  font-size: 27px;

  box-shadow:
    0 0 50px
    rgba(213,169,79,.08);
}


.transformation-core strong {

  margin-top: 25px;

  font-size: 8px;

  letter-spacing: .17em;
}


.transformation-core small {

  color: #4f5b63;

  font-size: 5.5px;

  text-align: center;

  letter-spacing: .13em;
}


.integrated-list {

  margin-top: 42px;

  border-top:
    1px solid
    var(--line);
}


.integrated-list div {

  padding: 14px 0;

  border-bottom:
    1px solid
    var(--line);

  color: #9da7ad;

  font-size: 11px;
}


.integrated-status {

  margin-top: 26px;

  display: flex;

  align-items: center;

  gap: 8px;
}


.integrated-status small {

  color: #5b7265;

  font-size: 6px;

  letter-spacing: .14em;
}


/* =========================================================
   OPERATIONS CONSOLE
   ========================================================= */

.operations-section {

  background:
    linear-gradient(
      180deg,
      #05070a,
      #030405
    );

  border-bottom:
    1px solid
    var(--line);
}


.operations-console {

  border:
    1px solid
    var(--line-strong);

  background:
    rgba(5,8,11,.85);

  box-shadow:
    0 40px 120px
    rgba(0,0,0,.35);
}


.console-header {

  height: 48px;

  padding:
    0 16px;

  display: flex;

  align-items: center;

  border-bottom:
    1px solid
    var(--line);
}


.console-lights {

  display: flex;

  gap: 6px;
}


.console-lights i {

  width: 5px;

  height: 5px;

  border:
    1px solid
    #5b646b;

  border-radius: 50%;
}


.console-header > span {

  margin-left: 15px;

  color: #59666f;

  font-size: 6.5px;

  letter-spacing: .15em;
}


.console-live {

  margin-left: auto;

  display: flex;

  align-items: center;

  gap: 7px;
}


.console-live b {

  color: var(--green);

  font-size: 6px;

  letter-spacing: .13em;
}


.console-body {

  min-height: 530px;

  display: grid;

  grid-template-columns:
    1.25fr .75fr;
}


.operations-stream {

  padding: 28px;

  border-right:
    1px solid
    var(--line);
}


.console-section-title {

  padding-bottom: 16px;

  display: flex;

  justify-content: space-between;

  border-bottom:
    1px solid
    var(--line);

  color: #626f78;

  font-size: 7px;

  letter-spacing: .14em;
}


.console-section-title b {

  color: #4f6858;
}


.live-events {

  padding-top: 9px;
}


.live-event {

  padding: 13px 0;

  display: grid;

  grid-template-columns:
    65px 1fr;

  gap: 16px;

  border-bottom:
    1px solid
    rgba(255,255,255,.045);

  animation:
    liveEventEnter
    .55s var(--ease);
}


@keyframes liveEventEnter {

  from {

    opacity: 0;

    transform:
      translateX(-10px);
  }

}


.live-event time {

  color: #46535b;

  font-size: 6px;
}


.live-event div {

  display: flex;

  flex-direction: column;

  gap: 4px;
}


.live-event strong {

  color: #a9b2b8;

  font-size: 10px;

  font-weight: 450;
}


.live-event span {

  color: #637078;

  font-size: 8px;
}


.system-monitor {
  padding: 28px;
}


.monitor-metric {
  margin-top: 31px;
}


.monitor-metric > div {

  display: flex;

  justify-content: space-between;

  margin-bottom: 8px;

  color: #77838c;

  font-size: 8px;
}


.monitor-metric > i {

  height: 2px;

  display: block;

  background:
    rgba(255,255,255,.055);
}


.monitor-metric > i b {

  height: 100%;

  display: block;

  background:
    linear-gradient(
      90deg,
      var(--green),
      var(--cyan)
    );

  box-shadow:
    0 0 10px
    rgba(87,255,154,.2);
}


.monitor-cells {

  margin-top: 54px;

  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  border-top:
    1px solid
    var(--line);

  border-left:
    1px solid
    var(--line);
}


.monitor-cells div {

  min-height: 105px;

  padding: 17px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  border-right:
    1px solid
    var(--line);

  border-bottom:
    1px solid
    var(--line);
}


.monitor-cells small {

  color: #4c5961;

  font-size: 6px;

  letter-spacing: .13em;
}


.monitor-cells strong {

  font-size: 23px;

  font-weight: 430;
}


.monitor-cells .status-online {

  color:
    var(--green);

  font-size: 10px;

  letter-spacing: .1em;
}


/* =========================================================
   INDUSTRIES
   ========================================================= */

.industries-section {

  overflow: hidden;

  background:
    #030507;
}


.industry-background-orbit {

  position: absolute;

  width: 1100px;

  height: 1100px;

  right: -560px;

  top: -50px;

  border-radius: 50%;

  border:
    1px solid
    rgba(87,255,154,.025);
}


.industry-control-panel {

  margin-bottom: 29px;

  display: flex;

  justify-content: space-between;

  gap: 22px;
}


.industry-search-box {

  width: 345px;

  min-height: 42px;

  padding:
    0 13px;

  display: flex;

  align-items: center;

  gap: 10px;

  border:
    1px solid
    var(--line);

  background:
    rgba(255,255,255,.008);
}


.industry-search-box > span {

  color: #56636b;
}


.industry-search-box input {

  flex: 1;

  border: 0;

  outline: 0;

  background:
    transparent;

  color: #fff;

  font-size: 9px;
}


.industry-filters {

  display: flex;

  flex-wrap: wrap;

  gap: 6px;
}


.industry-filter {

  min-height: 38px;

  padding:
    0 11px;

  border:
    1px solid
    var(--line);

  background:
    transparent;

  color: #68747c;

  font-size: 7px;

  transition:
    .2s ease;
}


.industry-filter:hover,
.industry-filter.active {

  border-color:
    rgba(87,255,154,.24);

  background:
    rgba(87,255,154,.03);

  color: #d8ffe5;
}


.industry-grid {

  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  border-top:
    1px solid
    var(--line);

  border-left:
    1px solid
    var(--line);
}


.industry-card {

  min-height: 138px;

  padding: 22px;

  position: relative;

  display: grid;

  grid-template-columns:
    29px 1fr;

  align-content: center;

  gap: 0 10px;

  border-right:
    1px solid
    var(--line);

  border-bottom:
    1px solid
    var(--line);

  background:
    rgba(255,255,255,.004);

  transition:
    background .25s ease,
    transform .25s var(--ease),
    border-color .25s ease;

  transform-style:
    preserve-3d;
}


.industry-card::before {

  content: "";

  position: absolute;

  inset: 0;

  opacity: 0;

  background:
    radial-gradient(
      circle at
      var(--mx,50%)
      var(--my,50%),

      rgba(87,255,154,.06),
      transparent 40%
    );

  transition:
    opacity .2s ease;
}


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


.industry-card:hover {

  transform:
    translateY(-2px);

  border-color:
    rgba(87,255,154,.12);

  background:
    rgba(87,255,154,.008);
}


.industry-card > span {

  color: #465159;

  font-size: 6px;

  padding-top: 4px;
}


.industry-card h3 {

  font-size: 15px;

  line-height: 1.3;

  font-weight: 440;
}


.industry-card small {

  grid-column: 2;

  margin-top: 10px;

  color: #4a5760;

  font-size: 6px;

  letter-spacing: .1em;
}


.industry-bottom-note {

  margin-top: 25px;

  display: flex;

  align-items: center;

  gap: 9px;
}


.industry-bottom-note p {

  color: #5d6870;

  font-size: 8px;
}


/* =========================================================
   ARCHITECTURE
   ========================================================= */

.architecture-section {

  background:
    linear-gradient(
      180deg,
      #05070a,
      #020304
    );

  border-top:
    1px solid
    var(--line);

  border-bottom:
    1px solid
    var(--line);
}


.architecture-heading {

  max-width: 930px;

  margin-left: 25%;

  margin-bottom: 70px;
}


.architecture-heading h2 {

  margin-top: 22px;

  font-size:
    clamp(
      43px,
      5vw,
      74px
    );

  line-height: 1.04;

  font-weight: 430;

  letter-spacing: -.052em;
}


.architecture-heading > p:last-child {

  max-width: 680px;

  margin-top: 28px;

  color: var(--muted);

  font-size: 14px;

  line-height: 1.8;
}


.architecture-map {

  min-height: 570px;

  padding: 44px;

  display: grid;

  grid-template-columns:
    1fr .38fr .9fr .38fr 1fr;

  align-items: center;

  border:
    1px solid
    var(--line);

  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(87,255,154,.035),
      transparent 27%
    );
}


.architecture-column {

  display: flex;

  flex-direction: column;

  gap: 9px;
}


.architecture-column small {

  margin-bottom: 8px;

  color: #59656d;

  font-size: 6px;

  letter-spacing: .14em;
}


.architecture-column span {

  padding:
    12px;

  border:
    1px solid
    var(--line);

  color: #75818a;

  font-size: 7px;

  letter-spacing: .1em;

  background:
    rgba(255,255,255,.004);
}


.architecture-flow {

  height: 100%;

  position: relative;
}


.architecture-flow span {

  position: absolute;

  left: 0;

  right: 0;

  top: 50%;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      rgba(87,255,154,.04),
      rgba(87,255,154,.42)
    );
}


.architecture-flow i {

  position: absolute;

  top:
    calc(50% - 2px);

  width: 5px;

  height: 5px;

  border-radius: 50%;

  background:
    var(--green);

  box-shadow:
    0 0 12px
    var(--green);

  animation:
    architectureDataFlow
    3.2s linear infinite;
}


.architecture-flow i:nth-child(1) {
  animation-delay: 0s;
}


.architecture-flow i:nth-child(2) {
  animation-delay: -1s;
}


.architecture-flow i:nth-child(3) {
  animation-delay: -2s;
}


@keyframes architectureDataFlow {

  from {
    left: 0;
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  to {
    left: 100%;
    opacity: 0;
  }

}


.architecture-flow-reverse {
  transform: scaleX(-1);
}


.architecture-core {

  min-height: 320px;

  position: relative;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;
}


.architecture-core-rings {

  position: absolute;

  inset: 0;
}


.architecture-core-rings i {

  position: absolute;

  left: 50%;

  top: 50%;

  transform:
    translate(-50%, -50%);

  border-radius: 50%;
}


.architecture-core-rings i:nth-child(1) {

  width: 260px;

  height: 260px;

  border:
    1px solid
    rgba(87,255,154,.13);
}


.architecture-core-rings i:nth-child(2) {

  width: 190px;

  height: 190px;

  border:
    1px dashed
    rgba(213,169,79,.18);

  animation:
    architectureCoreSpin
    17s linear infinite;
}


.architecture-core-rings i:nth-child(3) {

  width: 112px;

  height: 112px;

  border:
    1px solid
    rgba(130,233,255,.2);
}


@keyframes architectureCoreSpin {

  to {

    transform:
      translate(-50%, -50%)
      rotate(360deg);
  }

}


.architecture-core-a {

  width: 72px;

  height: 72px;

  position: relative;

  z-index: 3;

  display: grid;

  place-items: center;

  transform:
    rotate(45deg);

  border:
    1px solid
    rgba(87,255,154,.24);

  background:
    rgba(5,8,9,.82);

  box-shadow:
    0 0 55px
    rgba(87,255,154,.07);
}


.architecture-core-a span {

  transform:
    rotate(-45deg);

  color: var(--gold-light);

  font-size: 24px;
}


.architecture-core > small,
.architecture-core > strong,
.architecture-core > b {

  position: relative;

  z-index: 3;
}


.architecture-core > small {

  margin-top: 27px;

  color: #58636b;

  font-size: 6px;

  letter-spacing: .18em;
}


.architecture-core > strong {

  font-size: 24px;

  font-weight: 450;
}


.architecture-core > b {

  margin-top: 8px;

  color: #4f5b63;

  font-size: 5.5px;

  letter-spacing: .1em;
}


/* =========================================================
   REAL WORLD
   ========================================================= */

.real-world-section {

  background:
    #030507;
}


.real-world-diagram {

  min-height: 610px;

  position: relative;

  border:
    1px solid
    var(--line);

  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(87,255,154,.035),
      transparent 30%
    );
}


.real-node {

  position: absolute;

  min-width: 110px;

  min-height: 42px;

  padding:
    0 14px;

  display: grid;

  place-items: center;

  border:
    1px solid
    var(--line);

  background:
    rgba(5,8,10,.8);

  color: #7d8991;

  font-size: 7px;

  letter-spacing: .13em;
}


.node-office {
  left: 12%;
  top: 15%;
}


.node-field {
  left: 9%;
  top: 42%;
}


.node-mobile {
  left: 13%;
  bottom: 15%;
}


.node-assets {
  left: 33%;
  bottom: 9%;
}


.node-people {
  left: 32%;
  top: 9%;
}


.real-world-core {

  position: absolute;

  left: 52%;

  top: 50%;

  transform:
    translate(-50%, -50%);

  width: 170px;

  height: 170px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;
}


.real-core-ring {

  position: absolute;

  inset: 0;

  border-radius: 50%;

  border:
    1px dashed
    rgba(87,255,154,.18);

  animation:
    realCoreSpin
    15s linear infinite;
}


@keyframes realCoreSpin {

  to {
    transform:
      rotate(360deg);
  }

}


.real-world-core strong {

  width: 70px;

  height: 70px;

  display: grid;

  place-items: center;

  transform:
    rotate(45deg);

  border:
    1px solid
    rgba(213,169,79,.28);

  color:
    var(--gold-light);

  font-size: 24px;
}


.real-world-core small {

  margin-top: 23px;

  color: #59666e;

  font-size: 6px;

  letter-spacing: .13em;
}


.real-world-output {

  position: absolute;

  right: 9%;

  top: 50%;

  transform:
    translateY(-50%);

  min-width: 180px;

  padding:
    25px;

  border:
    1px solid
    rgba(87,255,154,.14);

  background:
    rgba(5,8,10,.78);
}


.real-world-output strong {

  color: #d7ffe4;

  font-size: 19px;

  font-weight: 430;
}


.real-world-output small {

  display: block;

  margin-top: 9px;

  color: #5b6d62;

  font-size: 6px;

  letter-spacing: .1em;
}


.real-line {

  position: absolute;

  height: 1px;

  transform-origin:
    left center;

  background:
    linear-gradient(
      90deg,
      rgba(87,255,154,.05),
      rgba(87,255,154,.38)
    );
}


.line-one {

  width: 290px;

  left: 22%;

  top: 20%;

  transform: rotate(21deg);
}


.line-two {

  width: 290px;

  left: 19%;

  top: 46%;

  transform: rotate(2deg);
}


.line-three {

  width: 270px;

  left: 22%;

  bottom: 21%;

  transform: rotate(-24deg);
}


.line-four {

  width: 215px;

  left: 40%;

  top: 20%;

  transform: rotate(75deg);
}


.line-five {

  width: 215px;

  left: 40%;

  bottom: 18%;

  transform: rotate(-75deg);
}


.output-line {

  width: 260px;

  left: 60%;

  top: 50%;
}


/* =========================================================
   GLOBAL NETWORK
   ========================================================= */

.global-network-section {

  background:
    linear-gradient(
      180deg,
      #05070a,
      #030405
    );

  border-top:
    1px solid
    var(--line);

  border-bottom:
    1px solid
    var(--line);
}


.global-network-layout {

  display: grid;

  grid-template-columns:
    .9fr 1.1fr;

  gap: 100px;

  align-items: center;
}


.world-system {

  min-height: 600px;

  position: relative;
}


.world-grid {

  position: absolute;

  inset:
    50px;

  border-radius: 50%;

  background-image:
    linear-gradient(
      rgba(87,255,154,.025)
      1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(87,255,154,.025)
      1px,
      transparent 1px
    );

  background-size:
    34px 34px;

  mask-image:
    radial-gradient(
      circle,
      black,
      transparent 70%
    );
}


.world-ring {

  position: absolute;

  left: 50%;

  top: 50%;

  transform:
    translate(-50%, -50%);

  border-radius: 50%;
}


.ring-global-one {

  width: 470px;

  height: 470px;

  border:
    1px solid
    rgba(87,255,154,.13);
}


.ring-global-two {

  width: 350px;

  height: 350px;

  border:
    1px dashed
    rgba(213,169,79,.16);

  animation:
    globalRingSpin
    22s linear infinite;
}


.ring-global-three {

  width: 230px;

  height: 230px;

  border:
    1px solid
    rgba(130,233,255,.1);

  animation:
    globalRingSpinReverse
    17s linear infinite;
}


@keyframes globalRingSpin {

  to {

    transform:
      translate(-50%, -50%)
      rotate(360deg);
  }

}


@keyframes globalRingSpinReverse {

  to {

    transform:
      translate(-50%, -50%)
      rotate(-360deg);
  }

}


.world-core {

  position: absolute;

  left: 50%;

  top: 50%;

  width: 90px;

  height: 90px;

  display: grid;

  place-items: center;

  transform:
    translate(-50%, -50%)
    rotate(45deg);

  border:
    1px solid
    rgba(213,169,79,.3);

  background:
    rgba(5,8,10,.82);

  box-shadow:
    0 0 70px
    rgba(213,169,79,.08);
}


.world-core span {

  transform:
    rotate(-45deg);

  color: var(--gold-light);

  font-size: 28px;
}


.country-node {

  position: absolute;

  display: flex;

  align-items: center;

  gap: 7px;
}


.country-node i {

  width: 6px;

  height: 6px;

  border-radius: 50%;

  background:
    var(--green);

  box-shadow:
    0 0 11px
    var(--green);
}


.country-node span {

  color: #64717a;

  font-size: 6px;

  letter-spacing: .13em;
}


.country-arg {
  left: 14%;
  bottom: 17%;
}


.country-eu {
  right: 13%;
  top: 21%;
}


.country-na {
  left: 9%;
  top: 32%;
}


.country-asia {
  right: 6%;
  bottom: 19%;
}


.country-eurasia {
  right: 7%;
  top: 47%;
}


.world-links {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;
}


.world-links path {

  fill: none;

  stroke:
    rgba(87,255,154,.18);

  stroke-width: .8;

  stroke-dasharray:
    4 7;

  animation:
    worldPathMove
    6s linear infinite;
}


@keyframes worldPathMove {

  to {

    stroke-dashoffset:
      -60;
  }

}


.global-network-copy h2 {

  margin-top: 22px;

  font-size:
    clamp(
      43px,
      5vw,
      73px
    );

  line-height: 1.04;

  font-weight: 430;

  letter-spacing: -.052em;
}


.global-network-copy > p:last-of-type {

  max-width: 720px;

  margin-top: 29px;

  color: var(--muted);

  font-size: 14px;

  line-height: 1.84;
}


.global-stat-grid {

  margin-top: 53px;

  padding-top: 28px;

  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  border-top:
    1px solid
    var(--line);
}


.global-stat-grid div {

  display: flex;

  flex-direction: column;

  gap: 6px;
}


.global-stat-grid strong {

  font-size: 30px;

  font-weight: 430;
}


.global-stat-grid span {

  color: #5a666f;

  font-size: 8px;
}


/* =========================================================
   TRUST SLIDER
   ========================================================= */

.trust-section {

  background:
    #030507;
}


.trust-slider {

  display: grid;

  grid-template-columns:
    auto 1fr auto;

  gap: 18px;

  align-items: center;
}


.trust-control {

  width: 48px;

  height: 48px;

  display: grid;

  place-items: center;

  border:
    1px solid
    var(--line);

  background:
    rgba(255,255,255,.008);

  transition:
    .2s ease;
}


.trust-control:hover {

  border-color:
    rgba(87,255,154,.25);

  color: #dfffea;
}


.trust-viewport {

  overflow: hidden;
}


.trust-track {

  display: flex;

  transition:
    transform .6s var(--ease);
}


.trust-slide {

  min-width: 100%;

  padding:
    45px;

  border:
    1px solid
    var(--line);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.016),
      transparent
    );
}


.trust-slide .trust-index {

  color: #445159;

  font-size: 7px;
}


.trust-slide blockquote {

  max-width: 900px;

  margin-top: 35px;

  font-size:
    clamp(
      24px,
      3vw,
      42px
    );

  line-height: 1.25;

  letter-spacing: -.03em;

  font-weight: 420;
}


.trust-slide footer {

  margin-top: 35px;

  display: flex;

  flex-direction: column;

  gap: 3px;
}


.trust-slide footer strong {

  font-size: 10px;

  font-weight: 500;
}


.trust-slide footer span {

  color: #5d6870;

  font-size: 7px;
}


.trust-dots {

  margin-top: 20px;

  display: flex;

  justify-content: center;

  gap: 7px;
}


.trust-dot {

  width: 22px;

  height: 2px;

  border: 0;

  background:
    #394249;

  transition:
    .2s ease;
}


.trust-dot.active {

  background:
    var(--green);

  box-shadow:
    0 0 8px
    rgba(87,255,154,.35);
}


/* =========================================================
   COMPANY
   ========================================================= */

.company-section {

  background:
    linear-gradient(
      180deg,
      #05070a,
      #030405
    );

  border-top:
    1px solid
    var(--line);

  border-bottom:
    1px solid
    var(--line);
}


.company-layout {

  display: grid;

  grid-template-columns:
    .85fr 1.15fr;

  gap: 95px;

  align-items: start;
}


.company-terminal {

  border:
    1px solid
    var(--line);

  background:
    linear-gradient(
      145deg,
      rgba(87,255,154,.018),
      rgba(255,255,255,.005)
    );

  transform-style:
    preserve-3d;
}


.terminal-header {

  height: 47px;

  padding:
    0 14px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  border-bottom:
    1px solid
    var(--line);
}


.terminal-header > div {

  display: flex;

  gap: 6px;
}


.terminal-header i {

  width: 5px;

  height: 5px;

  border-radius: 50%;

  border:
    1px solid
    #59636b;
}


.terminal-header span {

  color: #4c5961;

  font-size: 6px;

  letter-spacing: .15em;
}


.terminal-body {

  padding: 27px;
}


.terminal-body p {

  padding: 15px 0;

  display: grid;

  grid-template-columns:
    35px 1fr auto;

  gap: 14px;

  align-items: center;

  border-bottom:
    1px solid
    var(--line);
}


.terminal-body p span {

  color: #3d474f;

  font-size: 6px;
}


.terminal-body p b {

  color: #5d6971;

  font-size: 7px;

  letter-spacing: .1em;
}


.terminal-body p strong {

  color: #a5afb5;

  font-size: 7px;

  font-weight: 500;

  text-align: right;
}


.terminal-command {

  margin-top: 25px;

  display: flex;

  gap: 8px;

  align-items: center;

  color: #4e6e59;

  font-size: 6px;
}


.terminal-command i {

  color: var(--green);

  animation:
    terminalBlink
    1s step-end infinite;
}


@keyframes terminalBlink {

  50% {
    opacity: 0;
  }

}


.company-copy h2 {

  margin-top: 22px;

  font-size:
    clamp(
      43px,
      5vw,
      73px
    );

  line-height: 1.03;

  font-weight: 430;

  letter-spacing: -.052em;
}


.company-copy > p {

  max-width: 740px;

  margin-top: 25px;

  color: var(--muted);

  font-size: 14px;

  line-height: 1.85;
}


.company-copy .company-lead {

  margin-top: 36px;

  color: #bdc6cb;

  font-size: 17px;
}


.company-values {

  margin-top: 42px;

  border-top:
    1px solid
    var(--line);
}


.company-values div {

  padding: 16px 0;

  display: grid;

  grid-template-columns:
    44px 1fr;

  gap: 10px;

  border-bottom:
    1px solid
    var(--line);
}


.company-values span {

  color: #455159;

  font-size: 6px;
}


.company-values strong {

  font-size: 12px;

  font-weight: 450;
}


/* =========================================================
   PROJECT
   ========================================================= */

.project-section {

  position: relative;

  overflow: hidden;

  padding:
    150px 0;

  background:
    linear-gradient(
      180deg,
      #05070a,
      #020304
    );
}


.project-background-core {

  position: absolute;

  width: 1000px;

  height: 1000px;

  left: -550px;

  bottom: -590px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(87,255,154,.055),
      transparent 67%
    );
}


.project-circuit {

  position: absolute;

  inset: 0;

  opacity: .26;

  background:
    linear-gradient(
      90deg,
      transparent 0 18%,
      rgba(87,255,154,.05) 18% 18.08%,
      transparent 18.08% 75%,
      rgba(87,255,154,.04) 75% 75.08%,
      transparent 75.08%
    ),
    linear-gradient(
      0deg,
      transparent 0 31%,
      rgba(87,255,154,.045) 31% 31.08%,
      transparent 31.08%
    );
}


.project-layout {

  position: relative;

  display: grid;

  grid-template-columns:
    .82fr 1.18fr;

  gap: 105px;

  align-items: start;
}


.project-copy h2 {

  margin-top: 22px;

  font-size:
    clamp(
      44px,
      5vw,
      74px
    );

  line-height: 1.03;

  font-weight: 430;

  letter-spacing: -.052em;
}


.project-copy > p:last-of-type {

  max-width: 570px;

  margin-top: 29px;

  color: var(--muted);

  font-size: 14px;

  line-height: 1.83;
}


.project-channel-status {

  margin-top: 38px;

  display: flex;

  align-items: center;

  gap: 9px;
}


.project-channel-status small {

  color: #52665a;

  font-size: 6px;

  letter-spacing: .14em;
}


.project-system-info {

  margin-top: 48px;

  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  border-top:
    1px solid
    var(--line);

  border-left:
    1px solid
    var(--line);
}


.project-system-info div {

  min-height: 92px;

  padding: 15px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  border-right:
    1px solid
    var(--line);

  border-bottom:
    1px solid
    var(--line);
}


.project-system-info span {

  color: #465159;

  font-size: 5.5px;
}


.project-system-info strong {

  color: #8da098;

  font-size: 8px;
}


.project-form {

  padding: 33px;

  border:
    1px solid
    var(--line-strong);

  background:
    linear-gradient(
      145deg,
      rgba(87,255,154,.012),
      rgba(255,255,255,.005)
    );

  box-shadow:
    0 35px 110px
    rgba(0,0,0,.34);

  transform-style:
    preserve-3d;
}


.form-system-header {

  padding-bottom: 19px;

  margin-bottom: 24px;

  display: flex;

  justify-content: space-between;

  border-bottom:
    1px solid
    var(--line);
}


.form-system-header div {

  display: flex;

  flex-direction: column;

  gap: 3px;
}


.form-system-header span,
.form-system-header strong {

  color: #4f5c64;

  font-size: 6px;

  letter-spacing: .13em;
}


.form-grid {

  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 20px;
}


.project-form label {

  margin-bottom: 20px;

  display: flex;

  flex-direction: column;

  gap: 7px;
}


.project-form label > span {

  color: #66727a;

  font-size: 6px;

  letter-spacing: .12em;

  text-transform: uppercase;
}


.project-form input,
.project-form select,
.project-form textarea {

  width: 100%;

  border: 0;

  border-bottom:
    1px solid
    rgba(255,255,255,.13);

  outline: 0;

  border-radius: 0;

  padding:
    9px 0 11px;

  background:
    transparent;

  color: #dce3e7;

  transition:
    border-color .2s ease,
    background .2s ease;
}


.project-form input:focus,
.project-form select:focus,
.project-form textarea:focus {

  border-bottom-color:
    rgba(87,255,154,.55);

  background:
    rgba(87,255,154,.008);
}


.project-form textarea {
  resize: vertical;
}


.project-form option {
  background: #080b0f;
}


/* assessment */

.project-assessment {

  margin-top: 20px;

  padding: 22px;

  border:
    1px solid
    var(--line);

  background:
    rgba(255,255,255,.006);
}


.assessment-header {

  padding-bottom: 16px;

  display: flex;

  justify-content: space-between;

  border-bottom:
    1px solid
    var(--line);

  color: #58656d;

  font-size: 6px;

  letter-spacing: .13em;
}


.assessment-header b {

  color:
    var(--green);
}


.assessment-row {
  margin-top: 19px;
}


.assessment-row > div {

  display: flex;

  justify-content: space-between;

  margin-bottom: 7px;

  color: #7a858c;

  font-size: 8px;
}


.assessment-row > i {

  height: 2px;

  display: block;

  background:
    rgba(255,255,255,.05);
}


.assessment-row > i b {

  height: 100%;

  display: block;

  background:
    linear-gradient(
      90deg,
      var(--green),
      var(--gold)
    );

  box-shadow:
    0 0 9px
    rgba(87,255,154,.18);

  transition:
    width .5s var(--ease);
}


.project-submit {

  width: 100%;

  height: 55px;

  margin-top: 24px;

  padding:
    0 18px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  border:
    1px solid
    rgba(87,255,154,.3);

  background:
    linear-gradient(
      90deg,
      rgba(87,255,154,.09),
      rgba(213,169,79,.05)
    );

  color: #dcffe7;

  font-size: 8px;

  letter-spacing: .08em;

  transition:
    .25s ease;
}


.project-submit:hover {

  border-color:
    rgba(87,255,154,.55);

  box-shadow:
    0 0 42px
    rgba(87,255,154,.06);
}


.project-form-note {

  display: block;

  margin-top: 12px;

  color: #49555d;

  font-size: 6px;
}


/* =========================================================
   SYSTEM HUD
   ========================================================= */

.system-hud {

  position: fixed;

  right: 18px;

  bottom: 18px;

  z-index: 900;

  width: 190px;

  padding: 12px;

  border:
    1px solid
    rgba(255,255,255,.08);

  background:
    rgba(3,5,7,.75);

  backdrop-filter:
    blur(16px);

  opacity: .6;

  transition:
    opacity .2s ease,
    transform .2s ease;
}


.system-hud:hover {

  opacity: 1;

  transform:
    translateY(-2px);
}


.hud-header {

  padding-bottom: 9px;

  margin-bottom: 8px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  border-bottom:
    1px solid
    var(--line);
}


.hud-header span {

  color: #5b6870;

  font-size: 5.5px;

  letter-spacing: .14em;
}


.hud-row {

  padding: 5px 0;

  display: flex;

  justify-content: space-between;

  color: #48545c;

  font-size: 5.5px;

  letter-spacing: .08em;
}


.hud-row strong {

  color: #687d70;

  font-weight: 500;
}


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

.site-footer {

  overflow: hidden;

  border-top:
    1px solid
    var(--line);

  background:
    #010203;
}


.footer-wordmark {

  padding:
    30px 0;

  display: flex;

  gap: 80px;

  white-space: nowrap;

  color:
    rgba(255,255,255,.022);

  font-size:
    clamp(
      85px,
      12vw,
      190px
    );

  line-height: .9;

  font-weight: 520;

  letter-spacing: .04em;

  transform:
    translateX(-5%);
}


.footer-bottom {

  min-height: 116px;

  display: grid;

  grid-template-columns:
    1fr 1fr auto;

  gap: 30px;

  align-items: center;

  border-top:
    1px solid
    var(--line);
}


.footer-brand {

  display: flex;

  flex-direction: column;

  gap: 4px;
}


.footer-brand strong {

  font-size: 10px;

  letter-spacing: .2em;
}


.footer-brand small,
.footer-legal,
.footer-top {

  color: #536068;

  font-size: 6px;
}


.footer-legal {

  display: flex;

  gap: 18px;
}


/* =========================================================
   REVEALS
   ========================================================= */

.reveal {

  opacity: 0;

  transform:
    translateY(24px);

  transition:
    opacity .8s var(--ease),
    transform .8s var(--ease);
}


.reveal.visible {

  opacity: 1;

  transform: none;
}


/* =========================================================
   TILT CARDS
   ========================================================= */

.tilt-card {

  transform-style:
    preserve-3d;

  transition:
    transform .16s ease-out;
}


/* =========================================================
   RTL SAFE
   ========================================================= */

html[dir="rtl"] .desktop-nav {

  margin-right: auto;

  margin-left: 30px;
}


html[dir="rtl"] .language-menu {

  right: auto;

  left: 0;

  transform-origin:
    top left;
}


html[dir="rtl"] .architecture-heading {

  margin-left: 0;

  margin-right: 25%;
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width: 1100px) {

  :root {
    --section-space: 110px;
  }


  .desktop-nav {
    display: none;
  }


  .mobile-menu-button {
    display: block;
  }


  .mobile-nav {

    position: fixed;

    left: 0;

    right: 0;

    top: 84px;

    padding:
      22px 32px 32px;

    display: flex;

    flex-direction: column;

    background:
      rgba(2,3,4,.985);

    border-bottom:
      1px solid
      var(--line);

    opacity: 0;

    visibility: hidden;

    transform:
      translateY(-10px);

    transition:
      .25s var(--ease);
  }


  .mobile-nav.open {

    opacity: 1;

    visibility: visible;

    transform: none;
  }


  .mobile-nav a {

    padding: 15px 0;

    border-bottom:
      1px solid
      var(--line);

    color: #c9d0d4;

    font-size: 14px;
  }


  .hero-layout {

    grid-template-columns:
      1fr;
  }


  .hero-system {

    position: absolute;

    width: 55%;

    right: -11%;

    top: 17%;

    opacity: .36;
  }


  .hero-copy {

    position: relative;

    z-index: 5;
  }


  .section-heading,
  .global-network-layout,
  .company-layout,
  .project-layout {

    grid-template-columns:
      1fr;

    gap: 55px;
  }


  .why-grid,
  .capability-grid {

    grid-template-columns:
      repeat(2, 1fr);
  }


  .transformation-layout {

    grid-template-columns:
      1fr;
  }


  .transformation-core {

    min-height: 190px;
  }


  .console-body {

    grid-template-columns:
      1fr;
  }


  .operations-stream {

    border-right: 0;

    border-bottom:
      1px solid
      var(--line);
  }


  .industry-grid {

    grid-template-columns:
      repeat(2, 1fr);
  }


  .architecture-map {

    grid-template-columns:
      1fr .25fr .85fr .25fr 1fr;

    padding: 28px;
  }


  .real-world-diagram {
    transform: scale(.92);
  }


  .system-hud {
    display: none;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width: 700px) {

  :root {
    --section-space: 86px;
  }


  body,
  a,
  button,
  input,
  textarea,
  select {
    cursor: auto;
  }


  .auren-cursor,
  .cursor-glow {
    display: none;
  }


  .section-shell,
  .nav-shell {

    width:
      calc(100% - 36px);
  }


  .nav-shell {
    height: 72px;
  }


  .brand-copy small {
    display: none;
  }


  .nav-project {
    display: none;
  }


  .mobile-nav {
    top: 72px;
  }


  .language-menu {

    position: fixed;

    top: 79px;

    left: 18px !important;

    right: 18px !important;

    width: auto;
  }


  .language-grid {

    grid-template-columns:
      1fr;
  }


  .hero-section {

    min-height: 900px;
  }


  .hero-layout {

    min-height: 900px;

    padding-top: 105px;
  }


  .hero-copy h1 {

    font-size:
      clamp(
        48px,
        14vw,
        68px
      );
  }


  .hero-description {

    font-size: 14px;
  }


  .hero-actions {

    flex-direction: column;
  }


  .primary-action,
  .secondary-action {

    width: 100%;
  }


  .hero-specifications {

    grid-template-columns:
      repeat(2, 1fr);

    gap: 20px;
  }


  .hero-system {

    width: 95%;

    right: -62%;

    top: 25%;

    opacity: .24;
  }


  .hero-edge-data,
  .scroll-indicator {

    display: none;
  }


  .manifesto-layout {

    grid-template-columns:
      1fr;

    gap: 26px;
  }


  .section-index i {

    height: 36px;
  }


  .manifesto-data {

    grid-template-columns:
      repeat(2, 1fr);
  }


  .why-grid,
  .capability-grid,
  .industry-grid {

    grid-template-columns:
      1fr;
  }


  .section-heading {

    grid-template-columns:
      1fr;

    gap: 30px;
  }


  .industry-control-panel {

    flex-direction: column;
  }


  .industry-search-box {

    width: 100%;
  }


  .architecture-heading {

    margin-left: 0;

    margin-right: 0;
  }


  .architecture-map {

    grid-template-columns:
      1fr;

    gap: 24px;
  }


  .architecture-flow {

    height: 55px;
  }


  .architecture-flow span {

    left: 50%;

    right: auto;

    top: 0;

    bottom: 0;

    width: 1px;

    height: 100%;

    background:
      linear-gradient(
        var(--green),
        transparent
      );
  }


  .architecture-flow i {
    display: none;
  }


  .real-world-diagram {

    min-height: 720px;

    transform: none;
  }


  .real-node {

    min-width: 95px;
  }


  .node-office {
    left: 8%;
    top: 10%;
  }


  .node-field {
    left: 8%;
    top: 25%;
  }


  .node-mobile {
    left: 8%;
    top: 40%;
    bottom: auto;
  }


  .node-assets {
    left: 8%;
    top: 55%;
    bottom: auto;
  }


  .node-people {
    left: 8%;
    top: 70%;
  }


  .real-world-core {

    left: 70%;
    top: 38%;
  }


  .real-world-output {

    right: 5%;
    top: auto;
    bottom: 8%;
  }


  .real-line {
    display: none;
  }


  .world-system {

    min-height: 390px;
  }


  .ring-global-one {

    width: 320px;

    height: 320px;
  }


  .ring-global-two {

    width: 245px;

    height: 245px;
  }


  .ring-global-three {

    width: 160px;

    height: 160px;
  }


  .world-grid {

    inset: 30px;
  }


  .global-stat-grid {

    grid-template-columns:
      1fr;

    gap: 22px;
  }


  .trust-slider {

    grid-template-columns:
      1fr;

    gap: 13px;
  }


  .trust-control {

    display: none;
  }


  .trust-slide {
    padding: 30px 22px;
  }


  .form-grid {

    grid-template-columns:
      1fr;
  }


  .project-section {

    padding:
      90px 0;
  }


  .project-form {
    padding: 24px 20px;
  }


  .project-system-info {

    grid-template-columns:
      1fr;
  }


  .footer-bottom {

    padding:
      27px 0;

    grid-template-columns:
      1fr;

    gap: 17px;
  }


  .footer-legal {

    flex-direction: column;

    gap: 5px;
  }


  .boot-terminal {
    display: none;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media(prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {

    scroll-behavior: auto !important;

    animation-duration:
      .01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .01ms !important;
  }

}