/* AEGIS SOC — the ancient shield, re-instrumented.
   Deep void-blue ground, gold hull + ice-cyan telemetry, aerospace display
   (Michroma) over Archivo, Plex Mono for data. */

:root {
  --ink:        #060b14;
  --ink-2:      #0b1322;
  --line:       #1d2b44;
  --marble:     #e9eef6;
  --stone:      #94a0b4;
  --bronze:     #c9974f;
  --bronze-hi:  #e7bc72;
  --bronze-dim: #6e5a35;
  --signal:     #5fd2e6;
  --signal-dim: rgba(95, 210, 230, 0.35);
  --alarm:      #d96a50;

  --font-display: "Michroma", "Eurostile", "Bank Gothic", sans-serif;
  --font-body:    "Archivo", "Helvetica Neue", sans-serif;
  --font-mono:    "IBM Plex Mono", "SFMono-Regular", monospace;

  --w: min(1120px, calc(100vw - 48px));
  --gutter: max(24px, calc((100% - 1120px) / 2));
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}

body {
  position: relative;
  background: var(--ink);
  color: var(--stone);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Graticule — a faint sensor grid under everything. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(95, 210, 230, 0.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(95, 210, 230, 0.024) 1px, transparent 1px);
  background-size: 56px 56px;
}

/* Film grain — lifts the flat ink ground into something with material. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: var(--bronze-dim); color: var(--marble); }

a { color: var(--bronze-hi); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

a:focus-visible, .btn:focus-visible, .nav-toggle:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
  border-radius: 2px;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--marble);
  line-height: 1.3;
  text-wrap: balance;
}

.mono { font-family: var(--font-mono); font-size: 0.85em; }

.skip-link {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 100;
  padding: 10px 18px;
  background: var(--bronze);
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; text-decoration: none; }

/* ── Shared pieces ─────────────────────────────────────────────────── */

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: 20px;
}
.eyebrow::before { content: "// "; color: var(--signal); }

.btn {
  display: inline-block;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  padding: 14px 24px;
  border: 1px solid var(--bronze);
  color: var(--bronze-hi);
  transition: background 0.2s ease, color 0.2s ease,
              border-color 0.2s ease, box-shadow 0.2s ease;
}
.btn:hover { text-decoration: none; }

/* Primary action carries the angular hull cut. */
.btn-solid {
  background: var(--bronze);
  color: var(--ink);
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px,
                     100% 100%, 9px 100%, 0 calc(100% - 9px));
}
.btn-solid:hover {
  background: var(--bronze-hi);
  border-color: var(--bronze-hi);
  box-shadow: 0 6px 24px rgba(201, 151, 79, 0.25);
}

.btn-line:hover {
  border-color: var(--bronze-hi);
  color: var(--marble);
  box-shadow: inset 0 0 0 1px var(--bronze-dim);
}

.dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: 1px;
}
.dot-live {
  background: var(--signal);
  box-shadow: 0 0 8px rgba(95, 210, 230, 0.7);
  animation: breathe 3s ease-in-out infinite;
}
.dot-soon { background: none; border: 1px solid var(--stone); }

@keyframes breathe {
  0%, 100% { box-shadow: 0 0 4px rgba(95, 210, 230, 0.4); }
  50%      { box-shadow: 0 0 10px rgba(95, 210, 230, 0.9); }
}

/* Circuit meander — the Greek key redrawn as a signal trace, with one
   live via. Same geometry the ancients cut in stone; new material. */
.meander {
  width: var(--w);
  margin: 0 auto;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Cpath d='M0 7 H5 V2 H13 V12 H21 V7 H28' fill='none' stroke='%236e5a35' stroke-width='1.2'/%3E%3Ccircle cx='13' cy='12' r='1.3' fill='%236e5a35'/%3E%3Ccircle cx='21' cy='7' r='1.3' fill='%235fd2e6' fill-opacity='0.7'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: center;
  opacity: 0.8;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 22%, #000 78%, transparent);
}

/* ── Header ─────────────────────────────────────────────────────────── */

.top {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  padding: 22px var(--gutter);
  display: flex;
  align-items: center;
  gap: 40px;
  border-bottom: 1px solid transparent;
  transition: padding 0.25s ease, border-color 0.25s ease,
              background-color 0.25s ease;
}

.top.scrolled {
  padding-top: 14px;
  padding-bottom: 14px;
  background: rgba(6, 11, 20, 0.82);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--line);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.14em;
  color: var(--marble);
}
.brand:hover { text-decoration: none; color: var(--bronze-hi); }
.brand-mark { width: 26px; height: 26px; color: var(--bronze); flex: none; }
.brand-mark circle, .cta-mark circle { fill: var(--signal); }

.nav {
  display: flex;
  gap: 28px;
  margin-left: auto;
}
.nav a {
  position: relative;
  padding: 4px 0;
  color: var(--stone);
  font-size: 15px;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.nav a:hover { color: var(--marble); text-decoration: none; }
.nav a:hover::after, .nav a.active::after { transform: scaleX(1); }
.nav a.active { color: var(--marble); }

.top-cta { padding: 10px 16px; font-size: 11.5px; }

.nav-toggle {
  display: none;
  flex: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 40px; height: 40px;
  padding: 0 8px;
  background: none;
  border: 1px solid var(--line);
  cursor: pointer;
}
.nav-toggle-bar {
  display: block;
  height: 1.5px;
  background: var(--marble);
  transition: transform 0.25s ease;
}
.nav-open .nav-toggle-bar:first-child  { transform: translateY(3.75px) rotate(45deg); }
.nav-open .nav-toggle-bar:last-child   { transform: translateY(-3.75px) rotate(-45deg); }

/* ── Hero ───────────────────────────────────────────────────────────── */

.hero-atmos {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: min(880px, 110vh);
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 45% at 78% 28%, rgba(95, 210, 230, 0.055), transparent 70%),
    radial-gradient(ellipse 40% 35% at 70% 55%, rgba(201, 151, 79, 0.05),  transparent 70%),
    radial-gradient(ellipse 55% 50% at 15% 8%,  rgba(29, 43, 68, 0.55),    transparent 70%);
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
  mask-image: linear-gradient(to bottom, #000 70%, transparent);
}

.hero {
  position: relative;
  width: var(--w);
  margin: 0 auto;
  padding: 96px 0 110px;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: 64px;
  align-items: center;
}

.hero h1 {
  font-size: clamp(26px, 3.5vw, 42px);
  letter-spacing: 0.015em;
  line-height: 1.34;
  margin-bottom: 28px;
}
.hero h1 em { font-style: normal; color: var(--signal); }

.lede {
  font-size: 19px;
  max-width: 56ch;
  margin-bottom: 40px;
}
.lede strong { color: var(--marble); font-weight: 500; }

.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; }

.hero-emblem svg {
  width: 100%;
  max-width: 380px;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 0 40px rgba(201, 151, 79, 0.10))
          drop-shadow(0 0 56px rgba(95, 210, 230, 0.10));
}

.emblem-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.3em;
  fill: var(--stone);
  opacity: 0.85;
}
.emblem-label-live { fill: var(--signal); }

.emblem-frame path {
  fill: none;
  stroke: var(--stone);
  stroke-width: 1;
  opacity: 0.45;
}

.emblem-hud {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.22em;
  fill: var(--stone);
  opacity: 0.65;
}

.emblem-eyes circle {
  fill: var(--signal);
  opacity: 0.15;
  animation: wink 6s ease-in-out infinite;
}
.emblem-eyes circle:nth-child(2n)  { animation-delay: 1.4s; }
.emblem-eyes circle:nth-child(3n)  { animation-delay: 2.9s; }
.emblem-eyes circle:nth-child(4n)  { animation-delay: 4.1s; }
.emblem-eyes circle:nth-child(5n)  { animation-delay: 5.2s; }

@keyframes wink {
  0%, 100% { opacity: 0.12; }
  50%      { opacity: 0.6; }
}

/* The hundred eyes — faint points of watch scattered through the hero air. */
.watch-eye {
  position: absolute;
  width: 2.5px; height: 2.5px;
  border-radius: 50%;
  background: var(--signal);
  opacity: 0.13;
}
.watch-eye.wink { animation: wink 7s ease-in-out infinite; }

/* Instrument motion: the sweep scans, the dial creeps, one node per ring. */
.emblem-sweep, .emblem-dial, .orbit, .emblem-pulse { transform-origin: 180px 180px; }
.emblem-sweep { animation: sweep 12s linear infinite; }
.emblem-dial  { animation: sweep 90s linear infinite; }
.orbit-a { animation: sweep 30s linear infinite; }
.orbit-n { animation: sweep 20s linear infinite reverse; }
.orbit-p { animation: sweep 13s linear infinite; }
@keyframes sweep { to { transform: rotate(360deg); } }

.node-gold   { fill: var(--bronze-hi); }
.node-signal {
  fill: var(--signal);
  filter: drop-shadow(0 0 4px rgba(95, 210, 230, 0.9));
}
.emblem-core { filter: drop-shadow(0 0 6px rgba(95, 210, 230, 0.9)); }

.emblem-pulse { animation: pulse 3.2s ease-out infinite; }
@keyframes pulse {
  0%       { transform: scale(1);   opacity: 0.55; }
  75%, 100% { transform: scale(3);  opacity: 0; }
}

/* ── Sections ───────────────────────────────────────────────────────── */

.sec-head { max-width: 62ch; }
.sec-head h2 { font-size: clamp(20px, 2.4vw, 29px); margin-bottom: 18px; }
.sec-lede { font-size: 18px; }

.triad, .cycle, .principles {
  width: var(--w);
  margin: 0 auto;
  padding: 96px 0;
}

/* The triptych */
.steles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 56px;
}

.stele {
  position: relative;
  overflow: hidden;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-top: 2px solid var(--bronze-dim);
  padding: 34px 30px 28px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.25s ease, transform 0.25s ease,
              box-shadow 0.25s ease;
}

/* HUD corner tick — same mark the evidence plate carries. */
.stele::before {
  content: "";
  position: absolute;
  bottom: -1px; right: -1px;
  width: 12px; height: 12px;
  border-bottom: 1.5px solid var(--bronze);
  border-right: 1.5px solid var(--bronze);
  pointer-events: none;
}

/* Each service's Greek initial, ghosted into the panel */
.stele::after {
  content: attr(data-glyph);
  position: absolute;
  top: 2px; right: 20px;
  font-family: var(--font-display);
  font-size: 110px;
  line-height: 1;
  color: rgba(233, 238, 246, 0.04);
  pointer-events: none;
  transition: color 0.25s ease;
}
.stele:hover::after { color: rgba(95, 210, 230, 0.07); }
.stele:hover {
  border-color: var(--bronze-dim);
  border-top-color: var(--bronze);
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35),
              0 0 28px rgba(95, 210, 230, 0.05);
}

.stele-live {
  border-top-color: var(--signal);
  background:
    linear-gradient(180deg, rgba(95, 210, 230, 0.05), transparent 45%),
    var(--ink-2);
}
.stele-live:hover { border-top-color: var(--signal); }

.stele-role {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: 14px;
}

.stele h3 {
  font-size: 19px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.stele-myth {
  font-size: 14.5px;
  font-style: italic;
  color: var(--stone);
  margin-bottom: 18px;
}
.stele-myth em { color: var(--bronze-hi); }

.stele-what { color: var(--marble); font-size: 16px; margin-bottom: 18px; }

.stele ul { list-style: none; margin-bottom: 26px; }
.stele li {
  font-size: 15px;
  padding: 7px 0 7px 22px;
  position: relative;
}
.stele li::before {
  content: "";
  position: absolute;
  left: 0; top: 15px;
  width: 10px; height: 1.5px;
  background: var(--bronze);
}

.stele-status {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--marble);
}

/* The watch cycle — a genuine sequence, joined by one rule.
   Bronze nodes mark each watch; the last node is open — the loop returns. */
.loop {
  list-style: none;
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.loop li {
  padding-top: 30px;
  border-top: 1px solid var(--line);
  position: relative;
}

.loop li::before {
  content: "";
  position: absolute;
  top: -4px; left: 0;
  width: 7px; height: 7px;
  background: var(--bronze);
  transform: rotate(45deg);
}
.loop li:last-child::before {
  background: var(--ink);
  border: 1px solid var(--signal);
  top: -4.5px;
}
.loop li:last-child::after {
  content: "⟲";
  position: absolute;
  top: -13px; right: 0;
  font-size: 14px;
  color: var(--bronze-dim);
}

.loop-n {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--bronze);
  display: block;
  margin-bottom: 16px;
}

.loop h3 { font-family: var(--font-body); font-weight: 600; font-size: 17px; margin-bottom: 10px; }
.loop p { font-size: 15px; }

/* Principles + evidence card */
.prin-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 56px;
  margin-top: 56px;
  align-items: start;
}

.prin { padding: 22px 0; border-top: 1px solid var(--line); }
.prin:first-child { border-top: none; padding-top: 0; }
.prin h3 { font-family: var(--font-body); font-weight: 600; font-size: 18px; margin-bottom: 8px; }
.prin p { font-size: 15.5px; }

/* Evidence plate — corner ticks like a calibrated instrument panel */
.evidence {
  position: relative;
  background: #070d17;
  border: 1px solid var(--line);
}
.evidence::before, .evidence::after {
  content: "";
  position: absolute;
  width: 12px; height: 12px;
  pointer-events: none;
}
.evidence::before {
  top: -1px; left: -1px;
  border-top: 1.5px solid var(--bronze);
  border-left: 1.5px solid var(--bronze);
}
.evidence::after {
  bottom: -1px; right: -1px;
  border-bottom: 1.5px solid var(--bronze);
  border-right: 1.5px solid var(--bronze);
}

.evidence-bar {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  color: var(--stone);
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--ink-2);
}

.evidence pre {
  padding: 22px 18px;
  overflow-x: auto;
}
.evidence code {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.75;
  color: var(--marble);
}
.c-ok    { color: var(--signal); }
.c-alarm { color: var(--alarm); }
.c-dim   { color: var(--line); }

/* Evidence lines write themselves in when the plate scrolls into view */
.evidence .ln { opacity: 0; }
.evidence.in .ln { animation: ln-in 0.45s ease forwards; }
.evidence.in .ln:nth-of-type(1) { animation-delay: 0.15s; }
.evidence.in .ln:nth-of-type(2) { animation-delay: 0.30s; }
.evidence.in .ln:nth-of-type(3) { animation-delay: 0.45s; }
.evidence.in .ln:nth-of-type(4) { animation-delay: 0.60s; }
.evidence.in .ln:nth-of-type(5) { animation-delay: 0.72s; }
.evidence.in .ln:nth-of-type(6) { animation-delay: 0.84s; }
.evidence.in .ln:nth-of-type(7) { animation-delay: 0.96s; }
.evidence.in .ln:nth-of-type(8) { animation-delay: 1.10s; }
.evidence.in .ln:nth-of-type(9) { animation-delay: 1.25s; }
@keyframes ln-in { to { opacity: 1; } }

.cursor {
  display: inline-block;
  width: 7px; height: 14px;
  margin-left: 6px;
  vertical-align: -2px;
  background: var(--signal);
  animation: blink 1.1s steps(2, start) infinite;
}
@keyframes blink { to { visibility: hidden; } }

/* CTA band */
.cta-band {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(ellipse 50% 90% at 50% 100%, rgba(95, 210, 230, 0.045), transparent 70%),
    var(--ink-2);
}
.cta-inner {
  width: var(--w);
  margin: 0 auto;
  padding: 88px 0;
  text-align: center;
}
.cta-mark {
  width: 34px; height: 34px;
  color: var(--bronze);
  margin-bottom: 22px;
}
.cta-band h2 { font-size: clamp(20px, 2.4vw, 29px); margin-bottom: 18px; }
.cta-band .sec-lede { max-width: 58ch; margin: 0 auto 36px; }
.cta-band .hero-ctas { justify-content: center; }

/* ── Footer ─────────────────────────────────────────────────────────── */

.foot {
  width: var(--w);
  margin: 0 auto;
  padding: 64px 0 40px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px;
}

.foot-brand .brand { font-size: 12px; }
.foot-brand p { font-size: 14px; margin-top: 12px; }

.foot-col { display: flex; flex-direction: column; gap: 10px; }
.foot-col h4 {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 6px;
}
.foot-col a { color: var(--stone); font-size: 14.5px; }
.foot-col a:hover { color: var(--marble); }

.foot-fine {
  grid-column: 1 / -1;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: #7a8496;
}

/* ── Reveal on load / scroll ────────────────────────────────────────── */

.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in { opacity: 1; transform: none; }
.d1 { transition-delay: 0.12s; }
.d2 { transition-delay: 0.24s; }
.d3 { transition-delay: 0.36s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .emblem-sweep, .emblem-dial, .orbit-a, .orbit-n, .orbit-p,
  .emblem-pulse { animation: none; }
  .emblem-pulse { opacity: 0; }
  .stele, .btn, .top, .nav a::after, .nav-toggle-bar { transition: none; }
  .dot-live { animation: none; }
  .evidence .ln, .evidence.in .ln { opacity: 1; animation: none; }
  .cursor { animation: none; }
  .emblem-eyes circle, .watch-eye.wink { animation: none; }
  .stele::after { transition: none; }
}

/* ── Responsive ─────────────────────────────────────────────────────── */

@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; padding: 64px 0 80px; }
  .hero-emblem { order: -1; }
  .hero-emblem svg { max-width: 270px; }
  .steles { grid-template-columns: 1fr; }
  .loop { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .prin-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .triad, .cycle, .principles { padding: 72px 0; }
}

@media (max-width: 640px) {
  .top { gap: 16px; }
  .top-cta { margin-left: auto; }

  .nav-toggle { display: flex; }
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    padding: 8px var(--gutter) 20px;
    background: rgba(6, 11, 20, 0.96);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
  }
  .nav-open .nav { display: flex; }
  .nav a { padding: 13px 0; font-size: 16px; border-bottom: 1px solid var(--line); }
  .nav a:last-child { border-bottom: none; }
  .nav a::after { content: none; }

  .loop { grid-template-columns: 1fr; }
  .foot { grid-template-columns: 1fr; gap: 28px; }
}

/* Very narrow screens: the demo CTA lives in the hero and contact band. */
@media (max-width: 374px) {
  .top-cta { display: none; }
  .nav-toggle { margin-left: auto; }
}