/* ============================================================
   RCG · Engineering Schematic
   dark mode · monospace · CAD/terminal energy
   ============================================================ */

:root {
  /* surfaces — Revit dark / blueprint black */
  --bg:        #0a1117;
  --bg-1:      #0e1721;
  --bg-2:      #131e2b;
  --bg-3:      #182536;
  --panel:     #0c1620;

  /* ink — drafting white */
  --fg:        #e8eef5;
  --fg-2:      #b6bfca;
  --fg-3:      #7a8492;
  --fg-4:      #4a5360;
  --fg-5:      #2c333d;

  /* drafting linework */
  --line:      #1c2a3a;
  --line-2:    #28394d;
  --line-hi:   #3a5070;

  /* signal — engineering accents (cyan blueprint primary) */
  --sig:       #4cc9ff;   /* blueprint cyan — primary accent */
  --sig-2:     #6cf2a4;   /* signal green — secondary */
  --sig-dim:   #2d6280;
  --sig-glow:  rgba(76,201,255,0.16);

  --warn:      #ffb547;
  --crit:      #ff5b5b;
  --info:      #6ad8ff;
  --info-dim:  #2d6280;

  /* type */
  --mono:    "JetBrains Mono", "IBM Plex Mono", "DM Mono", ui-monospace, Menlo, monospace;
  --sans:    "Inter", "Geist", "Helvetica Neue", system-ui, sans-serif;
  --display: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  /* layout */
  --pad:    clamp(20px, 4vw, 56px);
  --max:    1440px;
  --gut:    clamp(20px, 4vw, 56px);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { color-scheme: dark; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01","ss02","cv11";
  background-image:
    /* fine 10px grid */
    linear-gradient(to right, rgba(40,58,80,0.22) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(40,58,80,0.22) 1px, transparent 1px),
    /* major 100px grid */
    linear-gradient(to right, rgba(76,140,200,0.18) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(76,140,200,0.18) 1px, transparent 1px),
    /* radial vignette like a CAD viewport */
    radial-gradient(ellipse at 50% 0%, rgba(76,201,255,0.06), transparent 60%);
  background-size: 10px 10px, 10px 10px, 100px 100px, 100px 100px, 100% 100%;
  background-attachment: fixed;
}

::selection { background: var(--sig); color: var(--bg); }

a { color: var(--fg); text-decoration: none; }

/* ---------- top status bar ---------- */
.statusbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(7,9,13,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
}
.statusbar__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 32px;
  gap: 24px;
}
.statusbar__left, .statusbar__right { display: flex; gap: 18px; align-items: center; }
.statusbar__right { justify-content: flex-end; }
.statusbar__center { color: var(--fg-3); }
.statusbar .led {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--sig);
  box-shadow: 0 0 0 0 var(--sig-glow);
  animation: led-pulse 2.4s ease-in-out infinite;
  margin-right: 6px;
}
.statusbar .k { color: var(--fg-4); }
.statusbar .v { color: var(--fg); }
.statusbar .v--sig { color: var(--sig); }
@keyframes led-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(108,242,164,0.5); }
  50%     { box-shadow: 0 0 0 6px rgba(108,242,164,0); }
}

/* ---------- nav header ---------- */
.nav {
  position: sticky; top: 32px; z-index: 49;
  background: rgba(7,9,13,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 14px var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.nav__brand {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--fg);
}
.nav__brand img {
  height: 28px !important;
  width: auto !important;
  max-width: 28px;
  display: block;
  filter: invert(1) brightness(1.1);
  flex: 0 0 auto;
}
.nav__brand-text {
  display: flex; flex-direction: column; line-height: 1.1; gap: 2px;
}
.nav__brand-mark { font-weight: 600; letter-spacing: 0.02em; }
.nav__brand-sub { color: var(--fg-4); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; }

.nav__links {
  display: flex; gap: 0; align-items: stretch;
  font-family: var(--mono);
  font-size: 12px;
  border: 1px solid var(--line-2);
  border-radius: 0;
}
.nav__link {
  padding: 9px 14px;
  color: var(--fg-3);
  border-right: 1px solid var(--line-2);
  cursor: pointer;
  transition: color .15s, background .15s;
  position: relative;
}
.nav__link:last-child { border-right: 0; }
.nav__link:hover { color: var(--fg); background: var(--bg-2); }
.nav__link.is-active {
  color: var(--bg);
  background: var(--sig);
}
.nav__link.is-active::before {
  content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 2px;
  background: var(--bg);
}

.nav__cta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 9px 16px;
  border: 1px solid var(--sig);
  color: var(--sig);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.nav__cta:hover { background: var(--sig); color: var(--bg); }

@media (max-width: 1080px) {
  .nav__links { font-size: 11px; }
  .nav__link { padding: 9px 10px; }
}
@media (max-width: 880px) {
  .nav__inner { flex-wrap: wrap; gap: 14px; }
  .nav__links { width: 100%; flex-wrap: wrap; }
  .nav__link { flex: 1 1 25%; text-align: center; border-bottom: 1px solid var(--line-2); }
  .nav__cta { display: none; }
}

/* ---------- page frame ---------- */
.page {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
  position: relative;
}
.page-fade { animation: pageFade .35s ease both; }
@keyframes pageFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* breadcrumb / route stamp */
.breadcrumb {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--fg-4);
  padding: 24px 0 0;
  display: flex; gap: 12px; align-items: center;
}
.breadcrumb .sep { color: var(--fg-5); }
.breadcrumb .cur { color: var(--sig); }

/* ---------- hero ---------- */
.hero {
  padding: 32px 0 80px;
  position: relative;
}
.hero__meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--fg-4);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: baseline;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
  margin-bottom: 36px;
}
.hero__meta .sig { color: var(--sig); }

.hero__eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sig);
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 24px;
}
.hero__eyebrow .led {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--sig); box-shadow: 0 0 8px var(--sig);
}

.hero__title {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(40px, 6.4vw, 96px);
  line-height: 0.96;
  letter-spacing: -0.025em;
  margin: 0 0 28px;
  color: var(--fg);
  max-width: 18ch;
  text-wrap: balance;
}
.hero__title .sig { color: var(--sig); }
.hero__title .dim { color: var(--fg-3); }
.hero__title em {
  font-style: normal;
  position: relative;
  color: var(--sig);
}
.hero__title em::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px;
  height: 1px; background: var(--sig);
  opacity: 0.5;
}

.hero__deck {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: start;
}
.hero__deck--split {
  grid-template-columns: 1fr 1.05fr;
  gap: 64px;
  align-items: start;
}
.hero__deck--split .hero__col { display: flex; flex-direction: column; }
.hero__deck--split .hero__col .hero__eyebrow { margin-bottom: 16px; }
.hero__deck--split .hero__col .hero__title { margin: 0 0 22px; max-width: 14ch; }
.hero__deck--split .hero__col .hero__lede { margin: 0 0 24px; max-width: 48ch; }
.hero__deck--split .hero__col--right {
  padding-top: 0;
  align-self: stretch;
  position: relative;
  min-height: 0;
}
.hero__deck--split .hero__col--right > .alog {
  position: absolute;
  inset: 0;
}
.hero__lede {
  font-family: var(--sans);
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.5;
  color: var(--fg-2);
  max-width: 56ch;
  margin: 0;
  text-wrap: pretty;
}
.hero__lede strong { color: var(--fg); font-weight: 500; }
.hero__lede .sig { color: var(--sig); }
.hero__cta {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-top: 28px;
}

@media (max-width: 880px) {
  .hero__deck { grid-template-columns: 1fr; gap: 32px; }
  .hero__meta { grid-template-columns: 1fr; gap: 6px; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  cursor: pointer;
  border: 1px solid var(--sig);
  background: var(--sig);
  color: var(--bg);
  transition: filter .15s, background .15s, color .15s, border-color .15s;
}
.btn:hover { filter: brightness(1.1); }
.btn--ghost {
  background: transparent;
  color: var(--fg);
  border-color: var(--line-hi);
}
.btn--ghost:hover { border-color: var(--sig); color: var(--sig); }
.btn .arr { font-family: var(--mono); }

/* ---------- spec rows / data tables ---------- */
.spec {
  border: 1px solid var(--line);
  background: var(--panel);
  font-family: var(--mono);
}
.spec__row {
  display: grid;
  grid-template-columns: 80px 1fr 2fr auto;
  gap: 24px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
  font-size: 13px;
  transition: background .15s;
}
.spec__row:last-child { border-bottom: 0; }
.spec__row:hover { background: var(--bg-2); }
.spec__id {
  color: var(--fg-4); font-size: 10.5px; letter-spacing: 0.16em;
}
.spec__name {
  font-family: var(--sans); font-size: 17px; color: var(--fg); font-weight: 500;
  letter-spacing: -0.005em;
}
.spec__name .sig { color: var(--sig); }
.spec__desc { color: var(--fg-3); font-size: 13px; line-height: 1.55; font-family: var(--sans); }
.spec__tail { color: var(--fg-4); font-size: 10.5px; letter-spacing: 0.12em; text-align: right; }

@media (max-width: 880px) {
  .spec__row { grid-template-columns: 60px 1fr; row-gap: 8px; }
  .spec__row .spec__desc, .spec__row .spec__tail { grid-column: 1 / -1; padding-left: 0; }
}

/* ---------- section header ---------- */
.section {
  padding: 96px 0 0;
  scroll-margin-top: 96px;
}
.section__head {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 56px;
  border-top: 1px solid var(--line);
  padding-top: 28px;
  margin-bottom: 36px;
  align-items: start;
}
.section__id {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--sig);
  display: flex; flex-direction: column; gap: 6px;
}
.section__id-num { color: var(--fg-4); font-size: 10.5px; }
.section__title {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 44px);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 14px;
  color: var(--fg);
}
.section__title em { color: var(--sig); font-style: normal; }
.section__title .dim { color: var(--fg-3); }
.section__deck {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--fg-3);
  max-width: 64ch;
  margin: 0;
}
@media (max-width: 880px) {
  .section__head { grid-template-columns: 1fr; gap: 16px; }
}

/* ---------- KPI grid (telemetry stat block) ---------- */
.kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  background: var(--panel);
}
.kpi {
  padding: 28px 24px;
  border-right: 1px solid var(--line);
  position: relative;
}
.kpi:last-child { border-right: 0; }
.kpi__label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-4);
  margin-bottom: 12px;
  display: flex; justify-content: space-between;
}
.kpi__label .id { color: var(--fg-5); }
.kpi__val {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.kpi__val .sig { color: var(--sig); }
.kpi__val .unit { font-size: 0.4em; color: var(--fg-4); margin-left: 6px; letter-spacing: 0; }
.kpi__delta {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--sig);
}
.kpi__delta.warn { color: var(--warn); }
.kpi__delta.crit { color: var(--crit); }

@media (max-width: 880px) {
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .kpi:nth-child(2) { border-right: 0; }
  .kpi { border-bottom: 1px solid var(--line); }
}

/* ---------- panel / card ---------- */
.panel {
  border: 1px solid var(--line);
  background: var(--panel);
  position: relative;
}
.panel__head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--fg-4);
}
.panel__head .title { color: var(--fg); font-size: 12px; letter-spacing: 0.06em; }
.panel__head .id { color: var(--fg-5); }
.panel__body { padding: 24px; }
.panel__corner {
  position: absolute;
  width: 8px; height: 8px;
  border: 1px solid var(--sig);
}
.panel__corner.tl { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.panel__corner.tr { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.panel__corner.bl { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
.panel__corner.br { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

/* ---------- terminal block ---------- */
.term {
  background: var(--bg-1);
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--fg-2);
  padding: 18px 22px;
}
.term .pfx { color: var(--sig); }
.term .com { color: var(--fg-4); }
.term .ok  { color: var(--sig); }
.term .warn { color: var(--warn); }
.term .crit { color: var(--crit); }
.term .info { color: var(--info); }
.term .v   { color: var(--fg); }
.term .dim { color: var(--fg-4); }

/* ---------- table ---------- */
.tbl {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--panel);
  font-family: var(--mono);
  font-size: 13px;
  border-collapse: collapse;
}
.tbl th, .tbl td {
  text-align: left;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
}
.tbl th {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-4);
  background: var(--bg-2);
}
.tbl tr:last-child td { border-bottom: 0; }
.tbl tr:hover td { background: var(--bg-2); }
.tbl .label { font-family: var(--sans); font-size: 14px; color: var(--fg); }
.tbl .ok    { color: var(--sig); }
.tbl .bad   { color: var(--warn); }
.tbl .crit  { color: var(--crit); }
.tbl .dim   { color: var(--fg-4); }

/* ---------- pipeline / steps ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  background: var(--panel);
}
.step {
  padding: 28px 22px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
}
.step:nth-child(4n) { border-right: 0; }
.step:nth-last-child(-n+4):not(:nth-child(-n+4)) { /* keep simple */ }
.step__id {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--sig);
  margin-bottom: 14px;
}
.step__title {
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--fg);
  margin: 0 0 8px;
}
.step__desc {
  font-size: 13px;
  line-height: 1.55;
  color: var(--fg-3);
  margin: 0;
}
@media (max-width: 1080px) { .steps { grid-template-columns: repeat(2, 1fr); } .step:nth-child(2n) { border-right: 0; } }
@media (max-width: 540px)  { .steps { grid-template-columns: 1fr; } .step { border-right: 0; } }

/* ---------- compare two-column ---------- */
.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line);
  background: var(--panel);
}
.compare > div {
  padding: 32px;
  border-right: 1px solid var(--line);
}
.compare > div:last-child {
  border-right: 0;
  background:
    radial-gradient(circle at top right, var(--sig-glow), transparent 60%),
    var(--panel);
}
.compare__label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-4);
  margin-bottom: 18px;
  display: flex; justify-content: space-between;
}
.compare__label .id { color: var(--fg-5); }
.compare__label.ok { color: var(--sig); }
.compare__num {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 22px;
  color: var(--fg);
}
.compare__num.strike {
  color: var(--fg-3);
  text-decoration: line-through;
  text-decoration-color: var(--crit);
  text-decoration-thickness: 2px;
}
.compare__num.sig { color: var(--sig); }
.compare__list {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--fg-2);
  display: flex; flex-direction: column; gap: 10px;
}
.compare__list span {
  padding-left: 22px; position: relative; line-height: 1.5;
}
.compare__list span::before {
  content: "▸"; position: absolute; left: 0; color: var(--sig); font-size: 11px;
}
@media (max-width: 760px) { .compare { grid-template-columns: 1fr; } .compare > div { border-right: 0; border-bottom: 1px solid var(--line); } }

/* ---------- slider ---------- */
.slider-wrap {
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 32px;
  display: grid; gap: 22px;
  font-family: var(--mono);
}
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 2px;
  background: var(--line-hi);
  outline: none; border-radius: 0;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px;
  background: var(--sig); border: 1px solid var(--bg);
  cursor: pointer;
  border-radius: 0;
  box-shadow: 0 0 0 1px var(--sig), 0 0 12px var(--sig-glow);
}
input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px; background: var(--sig);
  border: 1px solid var(--bg); cursor: pointer; border-radius: 0;
}
.slider-readouts {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  border-top: 1px solid var(--line);
  padding-top: 22px;
}
.slider-readouts > div { display: flex; flex-direction: column; gap: 6px; }
.slider-readouts__label {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--fg-4);
}
.slider-readouts__val {
  font-family: var(--display); font-size: 24px; line-height: 1; color: var(--fg);
  letter-spacing: -0.01em; font-weight: 500;
}
.slider-readouts__val.sig { color: var(--sig); }
@media (max-width: 600px) { .slider-readouts { grid-template-columns: 1fr; } }

/* ---------- ticker / scrolling marquee ---------- */
.ticker {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg-1);
  overflow: hidden;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg-3);
  padding: 12px 0;
  margin: 24px 0 0;
}

/* ---------- atlas pitch ---------- */
.atlas-pitch {
  margin-top: 32px;
  padding: 28px 32px;
  border: 1px solid var(--line);
  background: var(--bg-1);
  position: relative;
}
.atlas-pitch::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px; background: var(--sig);
}
.atlas-pitch__id {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em;
  color: var(--sig); text-transform: uppercase; margin-bottom: 14px;
}
.atlas-pitch__title {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(22px, 2.4vw, 32px); line-height: 1.2;
  letter-spacing: -0.015em; margin: 0 0 14px; color: var(--fg); max-width: 30ch;
}
.atlas-pitch__title em { font-style: normal; color: var(--sig); }
.atlas-pitch__deck {
  font-family: var(--sans); font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.55; color: var(--fg-2); max-width: 78ch; margin: 0 0 18px;
}
.atlas-pitch__deck strong { color: var(--fg); font-weight: 500; }
.atlas-pitch__pills {
  display: flex; flex-wrap: wrap; gap: 10px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
}
.atlas-pitch__pills > span {
  display: inline-flex; gap: 8px; align-items: center;
  padding: 7px 12px; border: 1px solid var(--line);
  background: var(--bg-0); color: var(--fg-3);
}
.ticker__track {
  display: flex; gap: 56px; white-space: nowrap;
  animation: ticker 60s linear infinite;
  width: max-content;
}
.ticker__item { display: inline-flex; gap: 10px; align-items: center; }
.ticker__item .dot { color: var(--sig); }
.ticker__item .v { color: var(--fg); }
@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- form ---------- */
.form {
  display: grid; gap: 18px;
  font-family: var(--mono);
}
.form .field { display: grid; gap: 6px; }
.form label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-4);
}
.form input, .form textarea, .form select {
  font-family: var(--mono);
  font-size: 14px;
  background: var(--bg-1);
  color: var(--fg);
  border: 1px solid var(--line-2);
  padding: 12px 14px;
  outline: none;
  border-radius: 0;
  transition: border-color .15s, background .15s;
}
.form input:focus, .form textarea:focus, .form select:focus {
  border-color: var(--sig); background: var(--bg-2);
}
.form textarea { min-height: 140px; resize: vertical; line-height: 1.5; }

/* ---------- segmented ---------- */
.seg {
  display: flex; border: 1px solid var(--line-2);
  font-family: var(--mono); font-size: 12px;
}
.seg button {
  flex: 1; padding: 12px 14px;
  background: transparent;
  color: var(--fg-3);
  border: 0;
  border-right: 1px solid var(--line-2);
  cursor: pointer;
  letter-spacing: 0.06em;
}
.seg button:last-child { border-right: 0; }
.seg button.is-on { background: var(--sig); color: var(--bg); }
.seg button:not(.is-on):hover { background: var(--bg-2); color: var(--fg); }

/* ---------- footer ---------- */
.footer {
  margin-top: 120px;
  border-top: 1px solid var(--line);
  background: var(--bg-1);
  padding: 56px var(--pad) 28px;
}
.footer__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: 48px;
}
.footer__brand .nav__brand-mark { color: var(--fg); }
.footer__col h5 {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-4);
  margin: 0 0 14px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}
.footer__col a {
  display: block; padding: 5px 0;
  font-family: var(--mono); font-size: 12.5px;
  color: var(--fg-2);
  cursor: pointer;
}
.footer__col a:hover { color: var(--sig); }
.footer__meta {
  max-width: var(--max);
  margin: 40px auto 0;
  border-top: 1px solid var(--line);
  padding-top: 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--fg-4);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px;
}
@media (max-width: 880px) {
  .footer__inner { grid-template-columns: 1fr 1fr; }
}

/* ---------- CTA section (full bleed) ---------- */
.cta {
  margin: 96px 0 0;
  padding: 80px var(--pad);
  border-top: 1px solid var(--sig);
  border-bottom: 1px solid var(--sig);
  background:
    radial-gradient(ellipse at 50% 0%, var(--sig-glow), transparent 60%),
    var(--bg-1);
  position: relative;
}
.cta::before, .cta::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--sig); opacity: 0.3;
}
.cta::before { top: 8px; }
.cta::after { bottom: 8px; }
.cta__inner { max-width: var(--max); margin: 0 auto; }
.cta__id {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--sig); margin-bottom: 18px;
}
.cta__title {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(36px, 5vw, 72px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  color: var(--fg);
  max-width: 22ch;
}
.cta__title em { color: var(--sig); font-style: normal; }
.cta__deck {
  font-family: var(--sans);
  font-size: 17px; line-height: 1.55;
  color: var(--fg-2);
  max-width: 64ch;
  margin: 0 0 28px;
}

/* ---------- generic ---------- */
.col-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
@media (max-width: 880px) { .col-2 { grid-template-columns: 1fr; } }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line);
  background: var(--panel);
}
.feature {
  padding: 28px 24px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.feature:nth-child(3n) { border-right: 0; }
.feature__id {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--sig);
  margin-bottom: 14px;
}
.feature__title {
  font-family: var(--sans);
  font-size: 18px; font-weight: 500;
  margin: 0 0 8px;
  color: var(--fg);
  letter-spacing: -0.005em;
}
.feature__desc {
  font-size: 13.5px; line-height: 1.55;
  color: var(--fg-3); margin: 0;
}
@media (max-width: 1080px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } .feature:nth-child(3n) { border-right: 1px solid var(--line); } .feature:nth-child(2n) { border-right: 0; } }
@media (max-width: 600px)  { .feature-grid { grid-template-columns: 1fr; } .feature { border-right: 0; } }

/* page bottom spacing */
main { padding-bottom: 0; }


/* ---------- Atlas Chat (AI page hero) ---------- */
.atlaschat { background: #0a0e13; }
.atlaschat__meta {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 18px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em;
  color: var(--fg-4); text-transform: uppercase;
  padding: 10px 18px; border-bottom: 1px solid #1d242e;
  background: #0c1218;
}
.atlaschat__scroll {
  height: 320px;
  overflow: hidden;
  padding: 18px 18px 12px;
  display: flex; flex-direction: column; gap: 14px;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 23px, rgba(40,48,64,0.18) 23px, rgba(40,48,64,0.18) 24px),
    #0a0e13;
  scroll-behavior: smooth;
}
.atlaschat__sys {
  align-self: center;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em;
  color: var(--fg-5); text-transform: uppercase;
  padding: 4px 10px;
}
.atlaschat__row {
  display: flex; flex-direction: column; gap: 6px;
  max-width: 78%;
  animation: chatIn .35s ease-out both;
}
.atlaschat__row--user { align-self: flex-end; align-items: flex-end; }
.atlaschat__row--atlas { align-self: flex-start; align-items: flex-start; }
.atlaschat__who {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.18em;
  color: var(--fg-5); text-transform: uppercase;
}
.atlaschat__row--user .atlaschat__who { color: #4cc9ff; }
.atlaschat__row--atlas .atlaschat__who { color: #6cf2a4; }
.atlaschat__note {
  font-family: var(--mono); font-size: 10.5px; color: var(--fg-5);
  letter-spacing: 0.04em; padding-bottom: 2px;
}
.atlaschat__bubble {
  font-family: var(--sans);
  font-size: 14px; line-height: 1.5;
  padding: 10px 14px;
  border: 1px solid #1d242e;
  background: #0f1620;
  color: var(--fg-2);
  max-width: 100%;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.atlaschat__bubble--atlas {
  border-color: rgba(108,242,164,0.35);
  background: rgba(108,242,164,0.06);
  color: #d6f5e3;
  border-left: 2px solid #6cf2a4;
}
.atlaschat__bubble--user {
  border-color: rgba(76,201,255,0.35);
  background: rgba(76,201,255,0.06);
  color: #d6ecf8;
  border-right: 2px solid #4cc9ff;
}
.atlaschat__typing {
  display: inline-flex; gap: 5px; align-items: center;
  padding: 14px 14px;
}
.atlaschat__typing > span {
  width: 6px; height: 6px; border-radius: 50%;
  background: #6cf2a4; opacity: 0.4;
  animation: chatDot 1.2s infinite ease-in-out;
}
.atlaschat__typing > span:nth-child(2) { animation-delay: .15s; }
.atlaschat__typing > span:nth-child(3) { animation-delay: .3s; }
@keyframes chatDot {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}
@keyframes chatIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.atlaschat__input {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px;
  border-top: 1px solid #1d242e;
  background: #0c1218;
  font-family: var(--mono); font-size: 12px;
  color: var(--fg-4);
}
.atlaschat__prompt { color: #6cf2a4; }
.atlaschat__inputtext { color: var(--fg-5); flex: 1; }
.atlaschat__caret {
  display: inline-block; width: 7px; height: 14px;
  background: #6cf2a4;
  animation: caret 1s steps(1) infinite;
}
@keyframes caret {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}


/* typewriter caret in chat bubbles */
.atlaschat__tcaret {
  display: inline-block;
  width: 7px; height: 14px;
  background: #6cf2a4;
  margin-left: 3px;
  vertical-align: -2px;
  animation: caret 0.9s steps(1) infinite;
}
.atlaschat__bubble--user .atlaschat__tcaret { background: #4cc9ff; }

/* tighter chat font + nudge right column up */
.atlaschat__bubble { font-size: 13.5px; padding: 8px 12px; line-height: 1.45; }
.hero__deck--split .hero__col--right { padding-top: 0; align-self: stretch; margin-top: 0; position: relative; min-height: 0; }
.hero__deck--split .hero__col--right > .alog { position: absolute; inset: 0; }


/* ============================================================
   EASE 3D MODEL — acoustics page
   ============================================================ */
.ease-section .ease-frame {
  position: relative;
  width: 100%;
  height: clamp(360px, 52vh, 560px);
  background: radial-gradient(ellipse 80% 60% at 50% 55%, #0d1218 0%, #050608 70%);
  border: 1px solid var(--line, rgba(255,255,255,0.12));
  overflow: hidden;
  margin-top: 16px;
}
#rcg-ease-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; transition: opacity .8s ease;
}
.ease-ui {
  position: absolute; top: 0; left: 0; right: 0; padding: 16px 20px;
  display: flex; justify-content: space-between; pointer-events: none;
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(0,212,255,0.6); z-index: 2;
}
.ease-corner {
  position: absolute; width: 14px; height: 14px;
  border: 1px solid rgba(0,212,255,.5);
  pointer-events: none; z-index: 2;
}
.ease-corner.tl { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.ease-corner.tr { top: 10px; right: 10px; border-left: 0; border-bottom: 0; }
.ease-corner.bl { bottom: 10px; left: 10px; border-right: 0; border-top: 0; }
.ease-corner.br { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }
.ease-bottom {
  position: absolute; bottom: 14px; left: 20px; right: 20px; z-index: 2;
  display: flex; justify-content: space-between; gap: 1rem;
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  color: rgba(0,212,255,0.5); letter-spacing: .14em; text-transform: uppercase;
  pointer-events: none;
}
.ease-legend {
  display: flex; gap: 1.4rem;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  color: var(--muted, rgba(255,255,255,0.5));
  letter-spacing: .08em; margin-top: 1rem; flex-wrap: wrap;
}
.ease-legend span { display: inline-flex; align-items: center; gap: .5rem; }
.ease-legend span::before {
  content: ""; width: 10px; height: 10px;
  background: #00d4ff; display: inline-block; opacity: .6;
}


/* ============================================================
   ATLAS LIVE OPS LOG — services hero
   ============================================================ */
.alog {
  position: relative;
  background: linear-gradient(180deg, #070a0e 0%, #0a0e13 100%);
  border: 1px solid #1d242e;
  height: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  font-family: var(--mono);
  overflow: hidden;
}
.alog::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(rgba(108,242,164,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(108,242,164,0.025) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}
.alog__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #1d242e;
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  background: #060a0e;
  z-index: 1;
}
.alog__title { color: #e8eef5; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.alog__id    { color: #4a5360; }
.alog__led {
  width: 7px; height: 7px; border-radius: 50%;
  background: #6cf2a4; box-shadow: 0 0 8px #6cf2a4;
  animation: alog-led 1.4s ease-in-out infinite;
}
@keyframes alog-led {
  0%,100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.alog__body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 0;
  scroll-behavior: smooth;
  position: relative;
  z-index: 1;
  mask-image: linear-gradient(to bottom, transparent 0%, black 6%, black 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 6%, black 94%, transparent 100%);
}
.alog__body::-webkit-scrollbar { display: none; }
.alog__body { scrollbar-width: none; }

.alog__row {
  display: grid;
  grid-template-columns: 78px 46px 1fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "ts sev src"
    "ts sev msg";
  gap: 2px 12px;
  padding: 7px 16px;
  font-size: 11px;
  line-height: 1.35;
  border-bottom: 1px solid rgba(29,36,46,0.5);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .35s ease, transform .35s ease;
}
.alog__row.is-in { opacity: 1; transform: translateY(0); }
.alog__ts  { grid-area: ts;  color: #4a5360; align-self: center; letter-spacing: 0.06em; }
.alog__sev { grid-area: sev; align-self: center; font-weight: 600; letter-spacing: 0.08em; padding: 2px 4px; text-align: center; border: 1px solid; border-radius: 1px; font-size: 9.5px; }
.alog__src { grid-area: src; color: #b8c2cf; font-weight: 500; letter-spacing: 0.10em; font-size: 10px; text-transform: uppercase; }
.alog__msg { grid-area: msg; color: #e8eef5; letter-spacing: 0.04em; }

.alog__row--i .alog__sev { color: #7aa8d8; border-color: #2a4055; background: rgba(122,168,216,0.06); }
.alog__row--w .alog__sev { color: #ffb547; border-color: #5a4216; background: rgba(255,181,71,0.08); }
.alog__row--c .alog__sev { color: #ff5c6c; border-color: #5a2330; background: rgba(255,92,108,0.10); }
.alog__row--c .alog__msg { color: #ffd9dd; }
.alog__row--o .alog__sev { color: #6cf2a4; border-color: #1f4a35; background: rgba(108,242,164,0.08); }
.alog__row--r .alog__sev { color: #c8a4ff; border-color: #3a2a5a; background: rgba(200,164,255,0.08); }
.alog__row--r .alog__src { color: #c8a4ff; }

.alog__foot {
  display: flex; gap: 14px; flex-wrap: wrap;
  padding: 10px 16px;
  border-top: 1px solid #1d242e;
  background: #060a0e;
  font-size: 9.5px; letter-spacing: 0.16em; color: #4a5360;
  z-index: 1;
}
.alog__foot .dot { width: 7px; height: 7px; display: inline-block; margin-right: 6px; vertical-align: middle; }
.alog__foot .dot--ok   { background: #6cf2a4; }
.alog__foot .dot--info { background: #7aa8d8; }
.alog__foot .dot--warn { background: #ffb547; }
.alog__foot .dot--crit { background: #ff5c6c; }
.alog__foot .dot--rcg  { background: #c8a4ff; }


/* ============================================================
   ATLAS v3.4 DEMO DASHBOARD (AI page hero)
   ============================================================ */
.atlasdemo {
  background: linear-gradient(180deg, #070a0e 0%, #0a0e13 100%);
  border: 1px solid #1d242e;
  font-family: var(--mono);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* full-width section that wraps the demo dashboard */
.atlasdemo-wrap {
  margin: 0 0 24px;
}
.atlasdemo-shell {
  width: 100%;
  height: clamp(680px, 78vh, 920px);
  display: flex;
}
.atlasdemo-shell > .atlasdemo { flex: 1; min-height: 0; }

/* wide single-line headline for the AI page hero */
.hero__title--wide {
  max-width: none;
  font-size: clamp(36px, 5.4vw, 80px);
  line-height: 1.02;
  text-wrap: balance;
  margin: 0 0 24px;
}

/* details/deck section that sits below the demo dashboard */
.atlasdemo-deck {
  padding: 8px 0 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (max-width: 880px) {
  .atlasdemo-shell { height: auto; min-height: 1100px; }
}
.atlasdemo__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #1d242e;
  background: #060a0e;
  font-size: 11px; letter-spacing: 0.14em;
}
.atlasdemo__brand { display: inline-flex; align-items: center; gap: 10px; color: #e8eef5; font-weight: 600; }
.atlasdemo__pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: #6cf2a4; box-shadow: 0 0 8px #6cf2a4;
  animation: ad-pulse 1.4s ease-in-out infinite;
}
@keyframes ad-pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.atlasdemo__title { letter-spacing: 0.16em; }
.atlasdemo__sub { color: #4a5360; letter-spacing: 0.16em; font-size: 10px; }
.atlasdemo__stats { display: flex; gap: 18px; }
.atlasdemo__k { color: #4a5360; margin-right: 6px; font-size: 10px; letter-spacing: 0.18em; }
.atlasdemo__v { color: #e8eef5; }
.atlasdemo__v--sig { color: #6cf2a4; }
.atlasdemo__v--warn { color: #ffb547; }

.atlasdemo__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1px;
  background: #1d242e;
  flex: 1;
  min-height: 0;
}
.atlasdemo__panel {
  background: #0a0e13;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.atlasdemo__panel-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid #1d242e;
  font-size: 10.5px; letter-spacing: 0.14em;
  color: #e8eef5; background: #0c1218;
}
.atlasdemo__panel-id { color: #4a5360; font-size: 9.5px; letter-spacing: 0.18em; display: inline-flex; align-items: center; gap: 6px; }
.atlasdemo__live-dot { width: 6px; height: 6px; border-radius: 50%; background: #6cf2a4; box-shadow: 0 0 6px #6cf2a4; animation: ad-pulse 1.4s infinite; }

/* devices grid */
.atlasdemo__devices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: #1d242e;
  overflow: hidden;
  flex: 1;
  min-height: 0;
}
.atlasdemo__device {
  padding: 10px 12px;
  background: #0a0e13;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 0;
}
.atlasdemo__device-top { display: flex; justify-content: space-between; align-items: center; }
.atlasdemo__device-id { font-size: 10.5px; letter-spacing: 0.12em; color: #b8c2cf; }
.atlasdemo__dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.atlasdemo__device-sub { font-size: 9.5px; color: #4a5360; letter-spacing: 0.04em; margin-top: 6px; }

/* alerts feed */
.atlasdemo__alerts {
  flex: 1; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px;
  mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
}
.atlasdemo__alert {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 10px;
  align-items: start;
  font-size: 10.5px;
  animation: ad-in .35s ease-out both;
}
@keyframes ad-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.atlasdemo__alert-sev {
  padding: 2px 4px;
  text-align: center;
  border: 1px solid;
  letter-spacing: 0.1em;
  font-weight: 600;
  font-size: 9.5px;
}
.atlasdemo__alert--ok   .atlasdemo__alert-sev { color: #6cf2a4; border-color: #1f4a35; background: rgba(108,242,164,0.08); }
.atlasdemo__alert--warn .atlasdemo__alert-sev { color: #ffb547; border-color: #5a4216; background: rgba(255,181,71,0.08); }
.atlasdemo__alert--crit .atlasdemo__alert-sev { color: #ff5b5b; border-color: #5a2330; background: rgba(255,91,91,0.10); }
.atlasdemo__alert-body { min-width: 0; line-height: 1.4; }
.atlasdemo__alert-src { color: #b8c2cf; letter-spacing: 0.10em; font-size: 9.5px; }
.atlasdemo__alert-msg { color: #e8eef5; font-family: var(--sans); font-size: 11.5px; letter-spacing: 0; margin-top: 2px; }

/* chat */
.atlasdemo__chat {
  flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 10px;
  scroll-behavior: smooth;
  mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
}
.atlasdemo__chat::-webkit-scrollbar { width: 0; }
.atlasdemo__chat { scrollbar-width: none; }
.atlasdemo__msg { display: flex; flex-direction: column; gap: 3px; max-width: 90%; animation: ad-in .3s ease-out both; }
.atlasdemo__msg--user { align-self: flex-end; align-items: flex-end; }
.atlasdemo__msg--atlas { align-self: flex-start; align-items: flex-start; }
.atlasdemo__msg-who { font-size: 9px; letter-spacing: 0.18em; color: #4a5360; }
.atlasdemo__msg--user .atlasdemo__msg-who { color: #4cc9ff; }
.atlasdemo__msg--atlas .atlasdemo__msg-who { color: #6cf2a4; }
.atlasdemo__bubble {
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.4;
  padding: 7px 10px;
  border: 1px solid #1d242e;
  background: #0f1620;
  color: #e8eef5;
}
.atlasdemo__msg--user .atlasdemo__bubble { border-color: rgba(76,201,255,0.35); border-right: 2px solid #4cc9ff; background: rgba(76,201,255,0.06); }
.atlasdemo__msg--atlas .atlasdemo__bubble { border-color: rgba(108,242,164,0.35); border-left: 2px solid #6cf2a4; background: rgba(108,242,164,0.06); color: #d6f5e3; }
.atlasdemo__caret {
  display: inline-block; width: 6px; height: 12px;
  background: #6cf2a4; margin-left: 3px; vertical-align: -2px;
  animation: ad-caret .9s steps(1) infinite;
}
.atlasdemo__msg--user .atlasdemo__caret { background: #4cc9ff; }
@keyframes ad-caret { 0%,50%{opacity:1} 51%,100%{opacity:0} }

/* tickets */
.atlasdemo__tickets {
  flex: 1; min-height: 0; overflow: hidden;
  padding: 10px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.atlasdemo__ticket {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid #1d242e;
  background: #0c1218;
}
.atlasdemo__ticket-l { display: flex; flex-direction: column; gap: 2px; }
.atlasdemo__ticket-id { font-size: 10px; letter-spacing: 0.14em; color: #6cf2a4; }
.atlasdemo__ticket-loc { font-size: 9.5px; color: #4a5360; letter-spacing: 0.08em; }
.atlasdemo__ticket-t { font-family: var(--sans); font-size: 11.5px; color: #e8eef5; line-height: 1.35; }
.atlasdemo__ticket-r { display: flex; align-items: center; gap: 8px; }
.atlasdemo__ticket-age { font-size: 9.5px; color: #4a5360; letter-spacing: 0.1em; }

/* utilization */
.atlasdemo__util {
  border-top: 1px solid #1d242e;
  background: #060a0e;
  padding: 10px 14px 12px;
}
.atlasdemo__util-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 10.5px; letter-spacing: 0.14em; color: #e8eef5;
  margin-bottom: 8px;
}
.atlasdemo__util-bars {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  align-items: end;
  height: 56px;
}
.atlasdemo__util-col { display: flex; flex-direction: column; align-items: center; gap: 3px; height: 100%; }
.atlasdemo__util-bar-wrap { width: 100%; height: 100%; display: flex; align-items: flex-end; }
.atlasdemo__util-bar {
  width: 100%;
  background: linear-gradient(180deg, #6cf2a4 0%, rgba(108,242,164,0.45) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}
.atlasdemo__util-label { font-size: 9px; color: #4a5360; letter-spacing: 0.1em; }
.atlasdemo__util-val { display:none; }

/* ============================================================
   ATLAS LOCAL AGENT CALLOUT (AI page)
   ============================================================ */
.atlas-local {
  padding: 32px 36px;
  border: 1px solid var(--line);
  background: var(--bg-1);
  position: relative;
}
.atlas-local::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px; background: var(--sig);
}
.atlas-local__id {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.18em;
  color: var(--sig); text-transform: uppercase;
  margin-bottom: 16px;
}
.atlas-local__title {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(22px, 2.6vw, 32px); line-height: 1.2;
  letter-spacing: -0.015em; margin: 0 0 14px; color: var(--fg);
  max-width: 32ch;
}
.atlas-local__title em { font-style: normal; color: var(--sig); }
.atlas-local__deck {
  font-family: var(--sans); font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.55; color: var(--fg-2); max-width: 78ch; margin: 0 0 20px;
}
.atlas-local__deck strong { color: var(--fg); font-weight: 500; }
.atlas-local__pills {
  display: flex; flex-wrap: wrap; gap: 10px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
}
.atlas-local__pills > span {
  display: inline-flex; gap: 8px; align-items: center;
  padding: 7px 12px; border: 1px solid var(--line);
  background: var(--bg-0); color: var(--fg-3);
}
.atlas-local__pills .sig { color: var(--sig); }