/* =========================================================
   AURENGIS
   CORPORATE EXPERIENCE SYSTEM
   main.css
   Version 4.2
========================================================= */

:root {
  --bg: #0a0d0c;
  --bg-soft: #101412;
  --bg-elevated: #151a17;
  --panel: rgba(255, 255, 255, 0.035);

  --text: #f3f6f4;
  --text-soft: #b7c0bb;
  --text-muted: #758079;

  --line: rgba(255, 255, 255, 0.085);
  --line-strong: rgba(255, 255, 255, 0.14);

  --accent: #68d69d;
  --accent-soft: rgba(104, 214, 157, 0.12);

  --warning: #d8b66a;
  --danger: #df6c62;

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

  --container: 1480px;
  --header-h: 84px;

  --ease-premium:
    cubic-bezier(0.22, 1, 0.36, 1);

  --shadow-premium:
    0 30px 90px rgba(0, 0, 0, 0.28);

  --cursor-angle: 0deg;
}

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

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  min-width: 320px;

  background:
    radial-gradient(
      circle at 76% 12%,
      rgba(78, 126, 100, 0.08),
      transparent 32%
    ),
    linear-gradient(
      180deg,
      #0a0d0c 0%,
      #0a0d0c 52%,
      #090c0b 100%
    );

  color: var(--text);

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

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  overflow-x: hidden;
}

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

button,
input,
textarea {
  font: inherit;
}

button {
  color: inherit;
}

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

::selection {
  background:
    rgba(104, 214, 157, 0.26);

  color: #fff;
}

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

.site-shell {
  position: relative;
  min-height: 100vh;
}

.section {
  position: relative;

  max-width:
    var(--container);

  margin:
    0 auto;

  padding:
    clamp(110px, 11vw, 190px)
    clamp(24px, 5vw, 76px);
}

.eyebrow {
  margin-bottom: 22px;

  color:
    var(--accent);

  font-size: 11px;
  font-weight: 600;

  letter-spacing:
    0.18em;

  text-transform:
    uppercase;
}

.section-heading {
  max-width: 900px;
  margin-bottom: 72px;
}

.section-heading h2 {
  margin: 0;

  max-width: 900px;

  font-size:
    clamp(
      44px,
      5.4vw,
      88px
    );

  line-height: 0.98;

  letter-spacing:
    -0.055em;

  font-weight: 500;
}

.section-heading p {
  margin:
    28px 0 0;

  max-width: 660px;

  color:
    var(--text-soft);

  font-size: 17px;

  line-height: 1.7;
}

.horizontal-heading {
  display: grid;

  grid-template-columns:
    minmax(0, 1.2fr)
    minmax(260px, 0.6fr);

  gap: 72px;

  align-items: end;

  max-width: none;
}

.horizontal-heading p {
  margin: 0;
}

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

.site-header {
  position: fixed;

  top: 0;
  left: 0;
  right: 0;

  z-index: 1000;

  min-height:
    var(--header-h);

  display: grid;

  grid-template-columns:
    minmax(220px, 1fr)
    auto
    minmax(220px, 1fr);

  align-items: center;

  gap: 30px;

  padding:
    0
    clamp(24px, 4.2vw, 72px);

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

  background:
    rgba(10, 13, 12, 0.74);

  backdrop-filter:
    blur(22px)
    saturate(130%);

  -webkit-backdrop-filter:
    blur(22px)
    saturate(130%);

  transition:
    background 0.35s ease,
    border-color 0.35s ease;
}

.site-header.is-scrolled {
  background:
    rgba(10, 13, 12, 0.92);

  border-color:
    rgba(255, 255, 255, 0.09);
}

.brand {
  display: inline-flex;

  flex-direction:
    column;

  width:
    fit-content;
}

.brand-mark {
  font-size: 22px;
  line-height: 1;

  font-weight: 650;

  letter-spacing:
    -0.04em;
}

.brand-sub {
  margin-top: 7px;

  color:
    var(--text-muted);

  font-size: 9px;

  letter-spacing:
    0.12em;

  text-transform:
    uppercase;
}

.main-nav {
  display: flex;

  align-items:
    center;

  gap: 28px;
}

.main-nav a {
  position: relative;

  color: #c8cfcb;

  font-size: 12px;
  font-weight: 520;

  white-space: nowrap;

  transition:
    color 0.22s ease;
}

.main-nav a::after {
  content: "";

  position: absolute;

  left: 0;
  right: 100%;
  bottom: -9px;

  height: 1px;

  background:
    var(--accent);

  transition:
    right
    0.3s
    var(--ease-premium);
}

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

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

.header-actions {
  display: flex;

  justify-content:
    flex-end;

  align-items:
    center;

  gap: 14px;
}

.language-trigger {
  min-width: 42px;
  min-height: 42px;

  border: 0;

  background:
    transparent;

  color:
    var(--text-soft);

  cursor:
    pointer;

  font-size: 11px;

  letter-spacing:
    0.12em;

  transition:
    color 0.2s ease;
}

.language-trigger:hover {
  color: #fff;
}

.mobile-menu-trigger {
  display: none;

  justify-self:
    end;

  width: 44px;
  height: 44px;

  border: 0;

  background:
    transparent;

  cursor:
    pointer;
}

.mobile-menu-trigger span {
  display: block;

  width: 20px;
  height: 1px;

  margin:
    6px auto;

  background:
    #fff;
}

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

.button {
  position: relative;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap: 11px;

  min-height:
    46px;

  padding:
    0 18px;

  border-radius:
    999px;

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

  font-size:
    12px;

  font-weight:
    570;

  cursor:
    pointer;

  transition:
    transform
    0.25s
    var(--ease-premium),

    border-color
    0.25s
    ease,

    background
    0.25s
    ease,

    color
    0.25s
    ease;
}

.button-primary {
  background:
    var(--text);

  border-color:
    var(--text);

  color:
    #090c0b;
}

.button-primary:hover {
  transform:
    translateY(-1px);

  background:
    #fff;
}

.button-ghost {
  background:
    rgba(
      255,
      255,
      255,
      0.02
    );

  color:
    #eef2f0;
}

.button-ghost:hover {
  border-color:
    rgba(
      255,
      255,
      255,
      0.28
    );

  background:
    rgba(
      255,
      255,
      255,
      0.05
    );
}

.button-large {
  min-height:
    54px;

  padding:
    0 24px;

  font-size:
    13px;
}

.text-link {
  display:
    inline-flex;

  margin-top:
    30px;

  color:
    #fff;

  font-size:
    13px;

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

  padding-bottom:
    5px;
}

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

.hero {
  position: relative;

  min-height:
    100svh;

  display:
    flex;

  align-items:
    center;

  padding:
    calc(
      var(--header-h)
      + 76px
    )
    clamp(
      24px,
      5vw,
      76px
    )
    80px;

  overflow:
    hidden;
}

.hero::before {
  content: "";

  position:
    absolute;

  inset: 0;

  pointer-events:
    none;

  background-image:
    linear-gradient(
      rgba(
        255,
        255,
        255,
        0.018
      )
      1px,
      transparent
      1px
    ),

    linear-gradient(
      90deg,
      rgba(
        255,
        255,
        255,
        0.018
      )
      1px,
      transparent
      1px
    );

  background-size:
    84px 84px;

  mask-image:
    linear-gradient(
      to bottom,
      rgba(
        0,
        0,
        0,
        0.7
      ),
      transparent
      84%
    );

  opacity:
    0.5;
}

.hero::after {
  content: "";

  position:
    absolute;

  width:
    620px;

  height:
    620px;

  right:
    -160px;

  top:
    8%;

  border-radius:
    50%;

  pointer-events:
    none;

  background:
    radial-gradient(
      circle,
      rgba(
        104,
        214,
        157,
        0.075
      ),
      transparent
      68%
    );

  filter:
    blur(20px);
}

.hero-grid {
  position:
    relative;

  z-index: 2;

  width:
    min(
      100%,
      var(--container)
    );

  margin:
    0 auto;

  display:
    grid;

  grid-template-columns:
    minmax(
      0,
      0.88fr
    )
    minmax(
      520px,
      1.12fr
    );

  gap:
    clamp(
      70px,
      8vw,
      150px
    );

  align-items:
    center;
}

.hero-copy {
  max-width:
    720px;
}

.hero h1 {
  margin: 0;

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

  line-height:
    0.9;

  letter-spacing:
    -0.07em;

  font-weight:
    470;
}

.hero h1 span {
  display:
    block;

  color:
    #939e98;
}

.hero-description {
  max-width:
    640px;

  margin:
    34px
    0
    0;

  color:
    #b8c1bc;

  font-size:
    clamp(
      16px,
      1.4vw,
      19px
    );

  line-height:
    1.72;
}

.hero-actions {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    12px;

  margin-top:
    38px;
}

.hero-meta {
  display:
    grid;

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

  gap:
    40px;

  margin-top:
    70px;

  padding-top:
    24px;

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

.hero-meta div {
  display:
    flex;

  flex-direction:
    column;

  gap:
    7px;
}

.hero-meta span {
  color:
    var(--text-muted);

  font-size:
    9px;

  letter-spacing:
    0.13em;

  text-transform:
    uppercase;
}

.hero-meta strong {
  color:
    #d8dedb;

  font-size:
    11px;

  line-height:
    1.55;

  font-weight:
    500;
}

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

.hero-system {
  position:
    relative;

  perspective:
    1200px;
}

.system-frame {
  position:
    relative;

  min-height:
    620px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.09
    );

  border-radius:
    var(--radius-lg);

  background:
    linear-gradient(
      145deg,
      rgba(
        255,
        255,
        255,
        0.035
      ),
      rgba(
        255,
        255,
        255,
        0.012
      )
    );

  box-shadow:
    var(--shadow-premium);

  overflow:
    hidden;

  transform-style:
    preserve-3d;

  transition:
    transform
    0.12s
    linear,

    border-color
    0.35s
    ease;
}

.system-frame::before {
  content: "";

  position:
    absolute;

  inset:
    0;

  pointer-events:
    none;

  background:
    radial-gradient(
      circle at
      var(
        --system-x,
        50%
      )
      var(
        --system-y,
        50%
      ),

      rgba(
        104,
        214,
        157,
        0.08
      ),

      transparent
      32%
    );
}

.system-frame-header {
  position:
    relative;

  z-index: 3;

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    center;

  padding:
    24px 26px;

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

.system-frame-header
> div:first-child {
  display:
    flex;

  flex-direction:
    column;

  gap:
    7px;
}

.system-label {
  color:
    var(--text-muted);

  font-size:
    9px;

  letter-spacing:
    0.15em;
}

.system-frame-header strong {
  font-size:
    15px;

  font-weight:
    520;
}

.system-status {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  color:
    #a9b4ae;

  font-size:
    9px;

  letter-spacing:
    0.12em;
}

.status-dot {
  width:
    7px;

  height:
    7px;

  border-radius:
    50%;

  background:
    var(--accent);

  box-shadow:
    0
    0
    14px
    rgba(
      104,
      214,
      157,
      0.6
    );
}

.system-content {
  position:
    relative;

  height:
    540px;
}

.system-node {
  position:
    absolute;

  z-index: 4;

  min-width:
    142px;

  padding:
    14px 15px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.09
    );

  border-radius:
    11px;

  background:
    rgba(
      10,
      13,
      12,
      0.74
    );

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);

  transition:
    transform
    0.28s
    var(--ease-premium),

    border-color
    0.28s
    ease,

    background
    0.28s
    ease,

    box-shadow
    0.28s
    ease;
}

.system-node span {
  display:
    block;

  color:
    #77827c;

  font-size:
    8px;

  letter-spacing:
    0.13em;
}

.system-node strong {
  display:
    block;

  margin-top:
    7px;

  color:
    #e4e9e6;

  font-size:
    11px;

  font-weight:
    520;
}

.system-node:hover,
.system-node.is-active {
  transform:
    translateY(-3px)
    scale(1.02);

  border-color:
    rgba(
      104,
      214,
      157,
      0.34
    );

  background:
    rgba(
      16,
      25,
      20,
      0.9
    );

  box-shadow:
    0
    12px
    50px
    rgba(
      0,
      0,
      0,
      0.28
    );
}

.node-field {
  left:
    6%;

  top:
    28%;
}

.node-core {
  left:
    39%;

  top:
    47%;
}

.node-fleet {
  right:
    5%;

  top:
    20%;
}

.node-workflow {
  right:
    5%;

  top:
    47%;
}

.node-data {
  right:
    5%;

  bottom:
    9%;
}

.node-executive {
  left:
    39%;

  top:
    5%;
}

.system-lines {
  position:
    absolute;

  inset:
    0;

  z-index:
    2;

  width:
    100%;

  height:
    100%;

  pointer-events:
    none;
}

.system-lines path {
  fill:
    none;

  stroke:
    rgba(
      145,
      160,
      152,
      0.2
    );

  stroke-width:
    1.1;

  transition:
    stroke
    0.3s
    ease,

    stroke-width
    0.3s
    ease,

    opacity
    0.3s
    ease;
}

.system-lines path.is-active {
  stroke:
    rgba(
      104,
      214,
      157,
      0.68
    );

  stroke-width:
    1.5;
}

.system-inspector {
  position:
    absolute;

  left:
    26px;

  bottom:
    24px;

  z-index:
    5;

  max-width:
    285px;

  padding:
    16px 18px;

  border-left:
    1px solid
    rgba(
      104,
      214,
      157,
      0.26
    );

  background:
    rgba(
      9,
      12,
      11,
      0.72
    );
}

.system-inspector span {
  color:
    var(--accent);

  font-size:
    8px;

  letter-spacing:
    0.15em;
}

.system-inspector strong {
  display:
    block;

  margin-top:
    7px;

  font-size:
    12px;

  font-weight:
    520;
}

.system-inspector p {
  margin:
    7px 0 0;

  color:
    var(--text-muted);

  font-size:
    10px;

  line-height:
    1.5;
}

/* =========================================================
   EXPERTISE
========================================================= */

.section-expertise {
  border-top:
    1px solid
    var(--line);
}

.expertise-layout {
  display:
    grid;

  grid-template-columns:
    minmax(
      320px,
      0.75fr
    )
    minmax(
      0,
      1.25fr
    );

  gap:
    70px;
}

.expertise-menu {
  border-top:
    1px solid
    var(--line);
}

.expertise-item {
  width:
    100%;

  min-height:
    92px;

  display:
    grid;

  grid-template-columns:
    58px
    1fr;

  align-items:
    center;

  border:
    0;

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

  background:
    transparent;

  color:
    var(--text-soft);

  text-align:
    left;

  cursor:
    pointer;

  transition:
    color
    0.25s
    ease,

    padding-left
    0.35s
    var(--ease-premium),

    background
    0.25s
    ease;
}

.expertise-item span {
  color:
    #647069;

  font-size:
    9px;
}

.expertise-item strong {
  font-size:
    clamp(
      17px,
      1.6vw,
      23px
    );

  font-weight:
    450;

  letter-spacing:
    -0.02em;
}

.expertise-item:hover,
.expertise-item.active {
  color:
    #fff;

  padding-left:
    10px;
}

.expertise-item.active {
  background:
    linear-gradient(
      90deg,
      rgba(
        104,
        214,
        157,
        0.045
      ),
      transparent
    );
}

.expertise-preview {
  position:
    relative;

  min-height:
    490px;

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

  border-radius:
    var(--radius-lg);

  background:
    rgba(
      255,
      255,
      255,
      0.018
    );

  overflow:
    hidden;
}

.expertise-preview-inner {
  min-height:
    490px;

  display:
    flex;

  flex-direction:
    column;

  padding:
    clamp(
      30px,
      4vw,
      54px
    );
}

.expertise-preview-meta {
  color:
    var(--accent);

  font-size:
    9px;

  letter-spacing:
    0.16em;
}

.expertise-preview h3 {
  margin:
    60px 0 0;

  max-width:
    620px;

  font-size:
    clamp(
      38px,
      4.2vw,
      68px
    );

  line-height:
    0.98;

  letter-spacing:
    -0.05em;

  font-weight:
    480;
}

.expertise-preview p {
  max-width:
    590px;

  margin:
    24px 0 0;

  color:
    var(--text-soft);

  font-size:
    15px;

  line-height:
    1.7;
}

.expertise-preview-list {
  display:
    grid;

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

  gap:
    0 30px;

  margin-top:
    42px;

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

.expertise-preview-list span {
  padding:
    16px 0;

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

  color:
    #ccd4cf;

  font-size:
    12px;
}

.expertise-terminal {
  margin-top:
    auto;

  display:
    grid;

  grid-template-columns:
    auto
    1fr
    auto;

  align-items:
    center;

  gap:
    20px;

  padding-top:
    30px;

  color:
    var(--text-muted);

  font-size:
    8px;

  letter-spacing:
    0.12em;
}

.expertise-terminal strong {
  color:
    #d7ded9;

  font-weight:
    500;
}

/* =========================================================
   WORK
========================================================= */

.section-work {
  border-top:
    1px solid
    var(--line);
}

.work-list {
  display:
    flex;

  flex-direction:
    column;
}

.work-card {
  position:
    relative;

  display:
    grid;

  grid-template-columns:
    90px
    minmax(
      260px,
      0.7fr
    )
    minmax(
      0,
      1fr
    );

  gap:
    40px;

  align-items:
    center;

  min-height:
    310px;

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

  transition:
    background
    0.35s
    ease;
}

.work-card:last-child {
  border-bottom:
    1px solid
    var(--line);
}

.work-card:hover {
  background:
    linear-gradient(
      90deg,
      rgba(
        255,
        255,
        255,
        0.018
      ),
      transparent
    );
}

.work-index {
  color:
    #65706a;

  font-size:
    11px;
}

.work-copy h3 {
  margin:
    0;

  font-size:
    clamp(
      32px,
      4vw,
      60px
    );

  line-height:
    1;

  letter-spacing:
    -0.05em;

  font-weight:
    470;
}

.work-copy p {
  max-width:
    460px;

  margin:
    18px 0 0;

  color:
    var(--text-soft);

  line-height:
    1.6;
}

.work-tags {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    7px;

  margin-top:
    24px;
}

.work-tags span {
  padding:
    7px 10px;

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

  border-radius:
    999px;

  color:
    var(--text-muted);

  font-size:
    8px;

  letter-spacing:
    0.08em;
}

.work-preview {
  min-height:
    210px;

  display:
    grid;

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

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

  border-radius:
    var(--radius-md);

  background:
    linear-gradient(
      145deg,
      rgba(
        255,
        255,
        255,
        0.03
      ),
      rgba(
        255,
        255,
        255,
        0.008
      )
    );

  overflow:
    hidden;
}

.work-stat {
  min-height:
    210px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    flex-end;

  padding:
    22px;

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

.work-stat:last-child {
  border-right:
    0;
}

.work-stat span {
  color:
    var(--text-muted);

  font-size:
    8px;

  letter-spacing:
    0.12em;
}

.work-stat strong {
  margin-top:
    8px;

  color:
    #e2e8e4;

  font-size:
    15px;

  font-weight:
    500;
}

/* =========================================================
   SYSTEM EXPLORER
========================================================= */

.system-explorer-section {
  border-top:
    1px solid
    var(--line);
}

.architecture-explorer {
  position:
    relative;

  min-height:
    690px;

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

  border-radius:
    var(--radius-lg);

  background:
    linear-gradient(
      180deg,
      rgba(
        255,
        255,
        255,
        0.018
      ),
      rgba(
        255,
        255,
        255,
        0.006
      )
    );

  overflow:
    hidden;
}

.architecture-node {
  position:
    absolute;

  z-index:
    4;

  min-width:
    120px;

  min-height:
    54px;

  padding:
    0 16px;

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

  border-radius:
    10px;

  background:
    rgba(
      10,
      13,
      12,
      0.88
    );

  color:
    #b4bdb8;

  font-size:
    9px;

  letter-spacing:
    0.12em;

  cursor:
    pointer;

  transition:
    border-color
    0.25s
    ease,

    color
    0.25s
    ease,

    transform
    0.3s
    var(--ease-premium),

    background
    0.25s
    ease;
}

.architecture-node:hover,
.architecture-node.is-active {
  border-color:
    rgba(
      104,
      214,
      157,
      0.44
    );

  background:
    rgba(
      16,
      24,
      20,
      0.96
    );

  color:
    #fff;

  transform:
    translateY(-3px);
}

.architecture-field {
  left:
    6%;

  top:
    46%;
}

.architecture-mobile {
  left:
    22%;

  top:
    46%;
}

.architecture-core {
  left:
    43%;

  top:
    46%;
}

.architecture-workflow {
  right:
    20%;

  top:
    18%;
}

.architecture-fleet {
  right:
    5%;

  top:
    46%;
}

.architecture-data {
  right:
    20%;

  bottom:
    18%;
}

.architecture-integrations {
  right:
    4%;

  bottom:
    18%;
}

.architecture-executive {
  left:
    43%;

  top:
    12%;
}

.architecture-lines {
  position:
    absolute;

  inset:
    0;

  z-index:
    2;

  width:
    100%;

  height:
    100%;

  pointer-events:
    none;
}

.architecture-lines path {
  fill:
    none;

  stroke:
    rgba(
      145,
      160,
      152,
      0.2
    );

  stroke-width:
    1.2;

  transition:
    stroke
    0.25s
    ease,

    stroke-width
    0.25s
    ease,

    opacity
    0.25s
    ease;
}

.architecture-detail {
  position:
    absolute;

  left:
    5%;

  bottom:
    6%;

  z-index:
    5;

  max-width:
    330px;
}

.architecture-detail span {
  color:
    var(--accent);

  font-size:
    8px;

  letter-spacing:
    0.14em;
}

.architecture-detail h3 {
  margin:
    8px 0 0;

  font-size:
    22px;

  font-weight:
    500;

  letter-spacing:
    -0.03em;
}

.architecture-detail p {
  margin:
    10px 0 0;

  color:
    var(--text-muted);

  font-size:
    12px;

  line-height:
    1.6;
}

.architecture-detail-list {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    7px;

  margin-top:
    18px;
}

.architecture-detail-list small {
  padding:
    7px 9px;

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

  border-radius:
    999px;

  color:
    var(--text-muted);

  font-size:
    8px;

  letter-spacing:
    0.08em;
}

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

.industry-grid {
  display:
    grid;

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

  gap:
    1px;

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

  background:
    var(--line);
}

.industry-card {
  min-height:
    260px;

  padding:
    28px;

  background:
    var(--bg);

  transition:
    background
    0.3s
    ease,

    transform
    0.3s
    var(--ease-premium),

    border-color
    0.25s
    ease;
}

.industry-card:hover {
  background:
    #101511;
}

.industry-card span {
  color:
    var(--text-muted);

  font-size:
    9px;

  letter-spacing:
    0.13em;
}

.industry-card h3 {
  margin:
    34px 0 0;

  font-size:
    clamp(
      24px,
      2.3vw,
      38px
    );

  font-weight:
    480;

  letter-spacing:
    -0.035em;
}

.industry-card p {
  margin:
    18px 0 0;

  color:
    var(--text-soft);

  line-height:
    1.65;
}

/* =========================================================
   ENGINEERING
========================================================= */

.section-engineering {
  border-top:
    1px solid
    var(--line);
}

.engineering-layout {
  display:
    grid;

  grid-template-columns:
    minmax(
      0,
      0.8fr
    )
    minmax(
      0,
      1.2fr
    );

  gap:
    100px;
}

.engineering-copy {
  margin:
    0;
}

.engineering-stack {
  border-top:
    1px solid
    var(--line);
}

.engineering-row {
  display:
    grid;

  grid-template-columns:
    0.42fr
    1fr;

  gap:
    30px;

  padding:
    27px 0;

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

.engineering-row span {
  color:
    var(--text-muted);

  font-size:
    10px;

  letter-spacing:
    0.1em;

  text-transform:
    uppercase;
}

.engineering-row strong {
  color:
    #dce2df;

  font-size:
    14px;

  font-weight:
    480;
}

/* =========================================================
   SECURITY
========================================================= */

.section-security {
  border-top:
    1px solid
    var(--line);
}

.security-panel {
  display:
    grid;

  grid-template-columns:
    minmax(
      0,
      1fr
    )
    minmax(
      0,
      0.8fr
    );

  gap:
    90px;

  padding:
    clamp(
      48px,
      6vw,
      88px
    );

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.1
    );

  border-radius:
    var(--radius-lg);

  background:
    linear-gradient(
      135deg,
      rgba(
        255,
        255,
        255,
        0.026
      ),
      rgba(
        255,
        255,
        255,
        0.009
      )
    );
}

.security-panel h2 {
  margin:
    0;

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

  line-height:
    0.98;

  letter-spacing:
    -0.055em;

  font-weight:
    480;
}

.security-panel p {
  max-width:
    590px;

  margin:
    25px 0 0;

  color:
    var(--text-soft);

  line-height:
    1.7;
}

.security-points {
  display:
    grid;

  align-content:
    start;
}

.security-points span {
  padding:
    18px 0;

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

  color:
    #d0d8d4;

  font-size:
    13px;
}

/* =========================================================
   INSIGHTS
========================================================= */

.insight-grid {
  display:
    grid;

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

  gap:
    18px;
}

.insight-card {
  position:
    relative;

  min-height:
    300px;

  padding:
    26px;

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

  border-radius:
    var(--radius-md);

  background:
    rgba(
      255,
      255,
      255,
      0.012
    );

  transition:
    transform
    0.3s
    var(--ease-premium),

    background
    0.3s
    ease,

    border-color
    0.3s
    ease;
}

.insight-card:hover {
  transform:
    translateY(-4px);

  background:
    rgba(
      255,
      255,
      255,
      0.025
    );

  border-color:
    rgba(
      255,
      255,
      255,
      0.14
    );
}

.insight-category {
  color:
    var(--accent);

  font-size:
    8px;

  letter-spacing:
    0.14em;
}

.insight-card h3 {
  margin:
    58px 0 0;

  font-size:
    clamp(
      24px,
      2.2vw,
      34px
    );

  line-height:
    1.08;

  letter-spacing:
    -0.04em;

  font-weight:
    480;
}

.insight-card p {
  margin:
    18px 0 0;

  color:
    var(--text-muted);

  line-height:
    1.65;
}

.insight-arrow {
  position:
    absolute;

  right:
    25px;

  bottom:
    23px;

  color:
    var(--text-muted);
}

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

.section-company {
  border-top:
    1px solid
    var(--line);
}

.company-layout {
  display:
    grid;

  grid-template-columns:
    minmax(
      0,
      0.9fr
    )
    minmax(
      0,
      0.8fr
    );

  gap:
    100px;
}

.company-layout h2 {
  margin:
    0;

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

  line-height:
    0.98;

  letter-spacing:
    -0.055em;

  font-weight:
    480;
}

.company-copy > p {
  margin:
    0 0 44px;

  color:
    var(--text-soft);

  font-size:
    18px;

  line-height:
    1.7;
}

.principles {
  display:
    flex;

  flex-direction:
    column;
}

.principles span {
  padding:
    18px 0;

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

  color:
    #d1d8d4;

  font-size:
    14px;
}

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

.project-section {
  border-top:
    1px solid
    var(--line);
}

.project-layout {
  display:
    grid;

  grid-template-columns:
    minmax(
      0,
      0.8fr
    )
    minmax(
      460px,
      0.9fr
    );

  gap:
    100px;
}

.project-intro h2 {
  margin:
    0;

  font-size:
    clamp(
      48px,
      5.7vw,
      92px
    );

  line-height:
    0.94;

  letter-spacing:
    -0.06em;

  font-weight:
    480;
}

.project-intro p {
  margin:
    26px 0 0;

  color:
    var(--text-soft);

  font-size:
    17px;
}

.project-panel {
  padding:
    clamp(
      28px,
      4vw,
      48px
    );

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

  border-radius:
    var(--radius-lg);

  background:
    rgba(
      255,
      255,
      255,
      0.014
    );
}

.project-step {
  display:
    none;
}

.project-step.active {
  display:
    block;
}

.project-step-number {
  display:
    block;

  margin-bottom:
    32px;

  color:
    var(--accent);

  font-size:
    9px;

  letter-spacing:
    0.15em;
}

.project-step label {
  display:
    block;

  margin-bottom:
    24px;

  color:
    var(--text-soft);

  font-size:
    11px;
}

.project-step input,
.project-step textarea {
  width:
    100%;

  margin-top:
    9px;

  padding:
    14px 0;

  border:
    0;

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

  outline:
    0;

  background:
    transparent;

  color:
    #fff;

  resize:
    vertical;

  transition:
    border-color
    0.2s
    ease;
}

.project-step input:focus,
.project-step textarea:focus {
  border-color:
    var(--accent);
}

.project-step input.is-invalid,
.project-step textarea.is-invalid {
  border-color:
    var(--danger);
}

.project-step input.is-invalid::placeholder,
.project-step textarea.is-invalid::placeholder {
  color:
    rgba(
      223,
      108,
      98,
      0.7
    );
}

.project-controls {
  display:
    flex;

  justify-content:
    space-between;

  gap:
    12px;

  margin-top:
    34px;
}

#projectBack:disabled {
  cursor:
    default;
}

.project-success {
  padding:
    20px 0;
}

.project-success span {
  color:
    var(--accent);

  font-size:
    9px;

  letter-spacing:
    0.14em;
}

.project-success h3 {
  margin:
    18px 0 8px;

  font-size:
    28px;

  font-weight:
    500;
}

.project-success strong {
  display:
    block;

  margin-top:
    24px;

  font-size:
    36px;

  letter-spacing:
    -0.04em;
}

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

.site-footer {
  max-width:
    var(--container);

  margin:
    0 auto;

  display:
    grid;

  grid-template-columns:
    1fr
    auto
    auto;

  gap:
    60px;

  align-items:
    end;

  padding:
    70px
    clamp(
      24px,
      5vw,
      76px
    );

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

.site-footer
> div:first-child {
  display:
    flex;

  flex-direction:
    column;

  gap:
    7px;
}

.site-footer strong {
  font-size:
    20px;
}

.site-footer span,
.footer-links a {
  color:
    var(--text-muted);

  font-size:
    10px;
}

.footer-links {
  display:
    flex;

  gap:
    22px;
}

.footer-meta {
  display:
    flex;

  gap:
    16px;
}

/* =========================================================
   LANGUAGE PANEL
========================================================= */

.language-panel {
  position:
    fixed;

  top:
    calc(
      var(--header-h)
      - 2px
    );

  right:
    clamp(
      24px,
      4.2vw,
      72px
    );

  z-index:
    1200;

  min-width:
    190px;

  padding:
    8px;

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

  border-radius:
    var(--radius-md);

  background:
    rgba(
      12,
      15,
      14,
      0.97
    );

  box-shadow:
    0
    24px
    70px
    rgba(
      0,
      0,
      0,
      0.36
    );

  opacity:
    0;

  visibility:
    hidden;

  transform:
    translateY(-8px);

  transition:
    opacity
    0.25s
    ease,

    transform
    0.25s
    var(--ease-premium),

    visibility
    0.25s
    ease;
}

.language-panel.open {
  opacity:
    1;

  visibility:
    visible;

  transform:
    translateY(0);
}

.language-panel button {
  display:
    block;

  width:
    100%;

  padding:
    12px 13px;

  border:
    0;

  border-radius:
    9px;

  background:
    transparent;

  color:
    var(--text-soft);

  text-align:
    left;

  cursor:
    pointer;
}

.language-panel button:hover {
  background:
    rgba(
      255,
      255,
      255,
      0.045
    );

  color:
    #fff;
}

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

.mobile-nav {
  position:
    fixed;

  inset:
    var(--header-h)
    0
    0
    0;

  z-index:
    950;

  display:
    none;

  padding:
    40px 24px;

  background:
    rgba(
      9,
      12,
      11,
      0.98
    );

  opacity:
    0;

  visibility:
    hidden;

  transition:
    opacity
    0.3s
    ease,

    visibility
    0.3s
    ease;
}

.mobile-nav.open {
  opacity:
    1;

  visibility:
    visible;
}

.mobile-nav nav {
  display:
    flex;

  flex-direction:
    column;
}

.mobile-nav a {
  padding:
    18px 0;

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

  font-size:
    24px;

  letter-spacing:
    -0.03em;
}

/* =========================================================
   AURENGIS SIGNATURE POINTER
   Precision Interface v4.2
========================================================= */

@media
  (hover: hover)
  and
  (pointer: fine) {

  html.aurengis-pointer,
  html.aurengis-pointer body,
  html.aurengis-pointer a,
  html.aurengis-pointer button,
  html.aurengis-pointer [role="button"],
  html.aurengis-pointer [data-cursor-label],
  html.aurengis-pointer .system-node,
  html.aurengis-pointer .architecture-node,
  html.aurengis-pointer .expertise-item,
  html.aurengis-pointer .work-card,
  html.aurengis-pointer .industry-card,
  html.aurengis-pointer .insight-card {
    cursor:
      none !important;
  }
}

.cursor-core,
.cursor-halo {
  position:
    fixed;

  left:
    0;

  top:
    0;

  pointer-events:
    none;

  user-select:
    none;

  z-index:
    100000;

  opacity:
    0;

  will-change:
    left,
    top,
    transform,
    opacity;
}

/* =========================================================
   PRIMARY POINTER — AURENGIS A
========================================================= */

.cursor-core {
  width:
    24px;

  height:
    29px;

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

  transition:
    opacity
    90ms
    linear,

    filter
    120ms
    ease;
}

/*
   Geometric A.
   No external font dependency.
*/

.cursor-core::before {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  background:
    linear-gradient(
      116deg,
      transparent
      0
      40%,

      #f4f7f5
      40.5%
      47%,

      transparent
      47.5%
    ),

    linear-gradient(
      64deg,
      transparent
      0
      40%,

      #f4f7f5
      40.5%
      47%,

      transparent
      47.5%
    );

  filter:
    drop-shadow(
      0
      0
      5px
      rgba(
        255,
        255,
        255,
        0.14
      )
    );
}

/* A crossbar */

.cursor-core::after {
  content:
    "";

  position:
    absolute;

  width:
    8px;

  height:
    1px;

  left:
    50%;

  top:
    57%;

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

  background:
    var(--accent);

  box-shadow:
    0
    0
    7px
    rgba(
      104,
      214,
      157,
      0.56
    );
}

/* =========================================================
   SENSOR FIELD
========================================================= */

.cursor-halo {
  width:
    46px;

  height:
    46px;

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

  border:
    1px solid
    rgba(
      220,
      231,
      225,
      0.11
    );

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      transparent
      0
      56%,

      rgba(
        255,
        255,
        255,
        0.014
      )
      57%,

      transparent
      69%
    );

  transition:
    width
    180ms
    var(--ease-premium),

    height
    180ms
    var(--ease-premium),

    border-radius
    180ms
    var(--ease-premium),

    border-color
    150ms
    ease,

    background
    150ms
    ease,

    box-shadow
    150ms
    ease,

    opacity
    90ms
    linear;
}

/* telemetry ring */

.cursor-halo::before {
  content:
    "";

  position:
    absolute;

  inset:
    -5px;

  border-radius:
    inherit;

  background:
    conic-gradient(
      from
      var(
        --cursor-angle,
        0deg
      ),

      transparent
      0deg
      31deg,

      rgba(
        104,
        214,
        157,
        0.60
      )
      31deg
      33deg,

      transparent
      33deg
      112deg,

      rgba(
        255,
        255,
        255,
        0.24
      )
      112deg
      113deg,

      transparent
      113deg
      207deg,

      rgba(
        104,
        214,
        157,
        0.44
      )
      207deg
      209deg,

      transparent
      209deg
      294deg,

      rgba(
        255,
        255,
        255,
        0.17
      )
      294deg
      295deg,

      transparent
      295deg
      360deg
    );

  mask:
    radial-gradient(
      transparent
      67%,

      #000
      68%
    );

  -webkit-mask:
    radial-gradient(
      transparent
      67%,

      #000
      68%
    );

  opacity:
    0.22;

  transition:
    opacity
    160ms
    ease;
}

/* scanning line */

.cursor-halo::after {
  content:
    "";

  position:
    absolute;

  left:
    9px;

  right:
    9px;

  top:
    50%;

  height:
    1px;

  background:
    linear-gradient(
      90deg,
      transparent,

      rgba(
        104,
        214,
        157,
        0.72
      ),

      transparent
    );

  opacity:
    0;
}

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

.cursor-halo span {
  position:
    absolute;

  left:
    calc(
      100% + 12px
    );

  top:
    50%;

  min-width:
    max-content;

  padding:
    7px
    9px;

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

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.11
    );

  border-radius:
    5px;

  background:
    rgba(
      7,
      10,
      9,
      0.94
    );

  backdrop-filter:
    blur(14px)
    saturate(130%);

  -webkit-backdrop-filter:
    blur(14px)
    saturate(130%);

  box-shadow:
    0
    9px
    35px
    rgba(
      0,
      0,
      0,
      0.28
    );

  color:
    #e2e8e5;

  font-size:
    7px;

  font-weight:
    650;

  line-height:
    1;

  letter-spacing:
    0.15em;

  text-transform:
    uppercase;

  white-space:
    nowrap;

  opacity:
    0;

  transition:
    opacity
    110ms
    ease,

    transform
    160ms
    var(--ease-premium);
}

.cursor-halo.has-label span {
  opacity:
    1;

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

/* =========================================================
   CURSOR — FAST MOVEMENT
========================================================= */

.cursor-halo.is-passing {
  width:
    26px;

  height:
    26px;

  opacity:
    0.16 !important;

  border-color:
    rgba(
      255,
      255,
      255,
      0.07
    );
}

.cursor-halo.is-passing::before {
  opacity:
    0;
}

.cursor-halo.is-passing span {
  opacity:
    0 !important;
}

/* =========================================================
   CURSOR — EXPLORING
========================================================= */

.cursor-halo.is-exploring {
  width:
    42px;

  height:
    42px;

  border-color:
    rgba(
      255,
      255,
      255,
      0.13
    );
}

/* =========================================================
   CURSOR — FOCUSING
========================================================= */

.cursor-halo.is-focusing {
  width:
    52px;

  height:
    52px;

  border-color:
    rgba(
      104,
      214,
      157,
      0.24
    );

  background:
    radial-gradient(
      circle,
      rgba(
        104,
        214,
        157,
        0.018
      ),
      transparent
      67%
    );
}

.cursor-halo.is-focusing::before {
  opacity:
    0.7;

  animation:
    aurengisTelemetryOrbit
    10s
    linear
    infinite;
}

/* =========================================================
   TARGET ACQUISITION
========================================================= */

.cursor-halo.is-target {
  width:
    58px;

  height:
    58px;

  border-radius:
    8px;

  border-color:
    rgba(
      104,
      214,
      157,
      0.30
    );

  box-shadow:
    inset
    8px
    0
    0
    -7px
    rgba(
      104,
      214,
      157,
      0.65
    ),

    inset
    -8px
    0
    0
    -7px
    rgba(
      104,
      214,
      157,
      0.65
    ),

    inset
    0
    8px
    0
    -7px
    rgba(
      104,
      214,
      157,
      0.65
    ),

    inset
    0
    -8px
    0
    -7px
    rgba(
      104,
      214,
      157,
      0.65
    );
}

/* =========================================================
   SYSTEM INSPECTION
========================================================= */

.cursor-halo.is-system {
  width:
    64px;

  height:
    64px;

  border-radius:
    5px;

  border-color:
    rgba(
      104,
      214,
      157,
      0.32
    );

  background:
    linear-gradient(
      135deg,
      rgba(
        104,
        214,
        157,
        0.025
      ),
      transparent
      58%
    );

  box-shadow:
    inset
    7px
    0
    0
    -6px
    rgba(
      104,
      214,
      157,
      0.70
    ),

    inset
    -7px
    0
    0
    -6px
    rgba(
      104,
      214,
      157,
      0.70
    ),

    inset
    0
    7px
    0
    -6px
    rgba(
      104,
      214,
      157,
      0.70
    ),

    inset
    0
    -7px
    0
    -6px
    rgba(
      104,
      214,
      157,
      0.70
    );
}

.cursor-halo.is-system::before {
  opacity:
    0.82;
}

.cursor-halo.is-system::after {
  opacity:
    0.68;

  animation:
    aurengisCursorScan
    1.45s
    ease-in-out
    infinite;
}

.cursor-core.is-system::before {
  filter:
    drop-shadow(
      0
      0
      8px
      rgba(
        104,
        214,
        157,
        0.35
      )
    );
}

/* =========================================================
   ACTION
========================================================= */

.cursor-halo.is-action:not(.is-system) {
  border-color:
    rgba(
      255,
      255,
      255,
      0.23
    );

  background:
    rgba(
      255,
      255,
      255,
      0.012
    );
}

/* =========================================================
   CLICK
========================================================= */

.cursor-halo.is-clicking {
  transform:
    translate(
      -50%,
      -50%
    )
    scale(
      0.79
    );

  border-color:
    rgba(
      104,
      214,
      157,
      0.70
    );

  transition:
    transform
    70ms
    ease,

    border-color
    70ms
    ease;
}

.cursor-core.is-clicking {
  filter:
    drop-shadow(
      0
      0
      9px
      rgba(
        104,
        214,
        157,
        0.52
      )
    );
}

/* =========================================================
   PROXIMITY
========================================================= */

.cursor-proximity {
  transition:
    transform
    210ms
    var(--ease-premium),

    border-color
    210ms
    ease,

    background
    210ms
    ease,

    box-shadow
    210ms
    ease !important;
}

.cursor-proximity.is-near {
  border-color:
    rgba(
      104,
      214,
      157,
      0.16
    ) !important;
}

/* =========================================================
   POINTER ANIMATIONS
========================================================= */

@keyframes aurengisTelemetryOrbit {
  to {
    transform:
      rotate(
        360deg
      );
  }
}

@keyframes aurengisCursorScan {
  0% {
    transform:
      translateY(
        -17px
      );

    opacity:
      0;
  }

  18% {
    opacity:
      0.68;
  }

  82% {
    opacity:
      0.68;
  }

  100% {
    transform:
      translateY(
        17px
      );

    opacity:
      0;
  }
}

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

.reveal {
  opacity:
    0;

  transform:
    translateY(
      22px
    );

  transition:
    opacity
    0.8s
    var(--ease-premium),

    transform
    0.8s
    var(--ease-premium);
}

.reveal.is-visible {
  opacity:
    1;

  transform:
    none;
}

/* =========================================================
   DEVICE DENSITY
========================================================= */

html[data-device="desktop"] {
  --device-motion-scale:
    1;
}

html[data-device="notebook"] {
  --device-motion-scale:
    0.86;
}

html[data-device="tablet"] {
  --device-motion-scale:
    0.66;
}

html[data-device="mobile"] {
  --device-motion-scale:
    0.42;
}

/* =========================================================
   NOTEBOOK
========================================================= */

@media
  (max-width: 1440px),
  (max-height: 850px) {

  :root {
    --header-h:
      76px;
  }

  .site-header {
    gap:
      18px;
  }

  .main-nav {
    gap:
      20px;
  }

  .hero {
    padding-top:
      calc(
        var(--header-h)
        + 52px
      );
  }

  .hero-grid {
    grid-template-columns:
      minmax(
        0,
        0.92fr
      )
      minmax(
        460px,
        1.08fr
      );

    gap:
      70px;
  }

  .system-frame {
    min-height:
      540px;
  }

  .system-content {
    height:
      460px;
  }

  .hero-meta {
    margin-top:
      46px;
  }
}

/* =========================================================
   TABLET / COMPACT DESKTOP
========================================================= */

@media
  (max-width: 1180px) {

  .site-header {
    grid-template-columns:
      1fr
      auto
      auto;
  }

  .main-nav {
    display:
      none;
  }

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

  .mobile-nav {
    display:
      block;
  }

  .hero {
    min-height:
      auto;
  }

  .hero-grid {
    grid-template-columns:
      1fr;

    gap:
      70px;
  }

  .hero-copy {
    max-width:
      820px;
  }

  .hero-system {
    max-width:
      900px;
  }

  .expertise-layout,
  .engineering-layout,
  .company-layout,
  .project-layout {
    grid-template-columns:
      1fr;

    gap:
      70px;
  }

  .security-panel {
    grid-template-columns:
      1fr;

    gap:
      60px;
  }

  .work-card {
    grid-template-columns:
      60px
      1fr;

    gap:
      24px;

    padding:
      34px 0;
  }

  .work-preview {
    grid-column:
      2 / -1;
  }

  .industry-grid,
  .insight-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }

  .horizontal-heading {
    grid-template-columns:
      1fr;

    gap:
      30px;
  }
}

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

@media
  (max-width: 720px) {

  :root {
    --header-h:
      70px;
  }

  .site-header {
    padding:
      0 18px;
  }

  .brand-sub {
    display:
      none;
  }

  .header-actions
  .button-primary {
    display:
      none;
  }

  .section {
    padding:
      90px
      20px;
  }

  .hero {
    padding:
      calc(
        var(--header-h)
        + 54px
      )
      20px
      70px;
  }

  .hero-grid {
    gap:
      54px;
  }

  .hero h1 {
    font-size:
      clamp(
        52px,
        15vw,
        76px
      );
  }

  .hero-description {
    font-size:
      16px;
  }

  .hero-actions {
    flex-direction:
      column;
  }

  .hero-actions .button {
    width:
      100%;
  }

  .hero-meta {
    grid-template-columns:
      1fr;

    gap:
      20px;
  }

  .system-frame {
    min-height:
      470px;
  }

  .system-content {
    height:
      395px;
  }

  .system-node {
    min-width:
      104px;

    padding:
      11px;
  }

  .system-node strong {
    font-size:
      9px;
  }

  .node-field {
    left:
      4%;
  }

  .node-core {
    left:
      35%;
  }

  .node-fleet,
  .node-workflow,
  .node-data {
    right:
      3%;
  }

  .node-executive {
    left:
      35%;
  }

  .system-inspector {
    left:
      16px;

    right:
      16px;

    max-width:
      none;
  }

  .section-heading {
    margin-bottom:
      50px;
  }

  .section-heading h2,
  .company-layout h2,
  .security-panel h2,
  .project-intro h2 {
    font-size:
      clamp(
        40px,
        12vw,
        62px
      );
  }

  .expertise-layout {
    gap:
      36px;
  }

  .expertise-item {
    grid-template-columns:
      45px
      1fr;
  }

  .expertise-preview {
    min-height:
      390px;
  }

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

  .expertise-terminal {
    grid-template-columns:
      1fr;
  }

  .work-card {
    grid-template-columns:
      1fr;
  }

  .work-index {
    margin-bottom:
      6px;
  }

  .work-preview {
    grid-column:
      auto;

    grid-template-columns:
      1fr;
  }

  .work-stat {
    min-height:
      105px;

    border-right:
      0;

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

  .architecture-explorer {
    min-height:
      620px;
  }

  .architecture-node {
    min-width:
      90px;

    min-height:
      45px;

    font-size:
      7px;
  }

  .architecture-field {
    left:
      5%;

    top:
      34%;
  }

  .architecture-mobile {
    left:
      5%;

    top:
      47%;
  }

  .architecture-core {
    left:
      36%;

    top:
      41%;
  }

  .architecture-workflow {
    right:
      4%;

    top:
      22%;
  }

  .architecture-fleet {
    right:
      4%;

    top:
      41%;
  }

  .architecture-data {
    right:
      4%;

    bottom:
      27%;
  }

  .architecture-integrations {
    right:
      4%;

    bottom:
      14%;
  }

  .architecture-executive {
    left:
      36%;

    top:
      10%;
  }

  .industry-grid,
  .insight-grid {
    grid-template-columns:
      1fr;
  }

  .engineering-row {
    grid-template-columns:
      1fr;

    gap:
      8px;
  }

  .security-panel {
    padding:
      34px 24px;
  }

  .project-panel {
    padding:
      28px 20px;
  }

  .site-footer {
    grid-template-columns:
      1fr;

    gap:
      28px;

    padding:
      50px 20px;
  }

  .footer-links {
    flex-wrap:
      wrap;
  }

  .cursor-core,
  .cursor-halo {
    display:
      none !important;
  }
}

/* =========================================================
   TOUCH DEVICES
========================================================= */

@media
  (hover: none),
  (pointer: coarse) {

  .cursor-core,
  .cursor-halo {
    display:
      none !important;
  }

  .system-frame {
    transform:
      none !important;
  }
}

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

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

  html {
    scroll-behavior:
      auto;
  }

  *,
  *::before,
  *::after {
    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;

    scroll-behavior:
      auto !important;
  }

  .cursor-halo::before,
  .cursor-halo::after {
    animation:
      none !important;
  }
}