/* aevion.ai — flagship proof-governed landing page. All values from DS tokens. */
body { margin: 0; }
.site { min-height: 100vh; position: relative; overflow-x: hidden; }
.site-gridbg { position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: var(--aev-grid); background-size: var(--aev-grid-size); }
.site > * { position: relative; z-index: 1; }
.sec { max-width: 1240px; margin: 0 auto; padding: 96px 32px 0; }
.sec-head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 36px; max-width: 720px; }
.sec-head h2 { font-size: var(--aev-text-3xl); }
.sec-head p { color: var(--aev-fg-muted); margin: 0; text-wrap: pretty; }

/* ---- nav ---- */
.site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: 64px;
  display: flex; align-items: center; gap: 32px; padding: 0 32px;
  background: rgba(5,5,5,0.72); backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--aev-ghost); }
.nav-brand { display: flex; align-items: center; gap: 12px; font-family: var(--aev-font-display);
  font-weight: 600; font-size: 15px; letter-spacing: 0.22em; color: var(--aev-fg); }
.nav-brand img { width: 26px; height: 26px; }
.nav-links { display: flex; gap: 22px; margin-left: auto; align-items: center; flex-wrap: nowrap; }
.nav-links a, .nav-links button { white-space: nowrap; }
.nav-links a { font-family: var(--aev-font-mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--aev-fg-muted); text-decoration: none; transition: color var(--aev-fast); }
.nav-links a:hover { color: var(--aev-green); }

/* ---- hero ---- */
.hero { padding: 156px 32px 0; max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: end; }
.hero h1 { font-size: var(--aev-text-hero); max-width: 9em; text-wrap: balance; }
.hero-copy { display: flex; flex-direction: column; gap: 20px; }
.hero-copy p { color: var(--aev-fg-muted); font-size: var(--aev-text-lg); max-width: 34em; margin: 0; text-wrap: pretty; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-side { display: flex; flex-direction: column; gap: 10px;
  background: var(--aev-surface-1); border: 1px solid var(--aev-ghost); border-top-color: var(--aev-ghost-top);
  border-radius: var(--aev-r-md); padding: 20px; }
.hero-side-row { display: flex; justify-content: space-between; gap: 12px; align-items: center;
  font-family: var(--aev-font-mono); font-size: 11px; color: var(--aev-fg-muted); }
.hero-side-row b { color: var(--aev-fg); font-weight: 500; }

/* ---- proof packet pipeline ---- */
.pipe-wrap { max-width: 1240px; margin: 40px auto 0; padding: 0 32px; }
.pipe-shell { background: var(--aev-surface-1); border: 1px solid var(--aev-ghost);
  border-top-color: var(--aev-ghost-top); border-radius: var(--aev-r-md); padding: 22px 24px 24px;
  display: flex; flex-direction: column; gap: 18px; }
.pipe-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.pipe-rail { position: relative; height: 2px; background: var(--aev-outline-variant); margin: 6px 8px 2px; }
.pipe-packet { position: absolute; top: -5px; width: 12px; height: 12px; border-radius: var(--aev-r-full);
  background: var(--aev-green); box-shadow: var(--aev-glow-green);
  transition: left 700ms var(--aev-ease), background 300ms var(--aev-ease), box-shadow 300ms var(--aev-ease); }
.pipe-packet[data-state="amber"] { background: var(--aev-amber); box-shadow: var(--aev-glow-amber); }
.pipe-packet[data-state="red"] { background: var(--aev-red); box-shadow: var(--aev-glow-red); }
.pipe { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.pipe-node { background: var(--aev-surface-2); border: 1px solid var(--aev-ghost);
  border-radius: var(--aev-r-sm); padding: 12px; display: flex; flex-direction: column; gap: 8px;
  transition: background var(--aev-base), border-color var(--aev-base); }
.pipe-node[data-on="true"] { background: var(--aev-surface-3); }
.pipe-node-label { font-family: var(--aev-font-mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--aev-fg-muted); }
.pipe-chip { font-family: var(--aev-font-mono); font-size: 10px; letter-spacing: 0.1em; min-height: 15px; }
.pipe-result { display: flex; align-items: center; gap: 14px; min-height: 22px;
  font-family: var(--aev-font-mono); font-size: 11px; color: var(--aev-fg-dim); }

/* ---- status cards ---- */
.scards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.scard { background: var(--aev-surface-2); border: 1px solid var(--aev-ghost);
  border-top-color: var(--aev-ghost-top); border-radius: var(--aev-r-md);
  padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.scard p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--aev-fg-muted); }

/* ---- receipt wall ---- */
.rwall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.modal-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,0.6);
  backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 24px; }
.modal { width: min(560px, 94vw); background: rgba(13,13,15,0.88); backdrop-filter: blur(24px);
  border: 1px solid var(--aev-ghost); border-top-color: var(--aev-ghost-top);
  border-radius: var(--aev-r-lg); padding: 28px; display: flex; flex-direction: column; gap: 18px;
  box-shadow: var(--aev-shadow-float); }
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.modal-facts { display: grid; grid-template-columns: auto 1fr; gap: 7px 18px; margin: 0; }
.modal-facts dt { font-family: var(--aev-font-mono); font-size: 9px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--aev-fg-faint); align-self: center; margin: 0; }
.modal-facts dd { font-family: var(--aev-font-mono); font-size: 12px; color: var(--aev-fg); margin: 0; word-break: break-all; }

/* ---- verifier ---- */
.verifier { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: start; }
.demo-flags { display: flex; gap: 8px; flex-wrap: wrap; }
.vconsole { background: var(--aev-surface-1); border: 1px solid var(--aev-ghost);
  border-top-color: var(--aev-ghost-top); border-radius: var(--aev-r-md); padding: 24px;
  display: flex; flex-direction: column; gap: 16px; }
.vinput { width: 100%; box-sizing: border-box; background: var(--aev-surface-2); color: var(--aev-fg);
  font-family: var(--aev-font-mono); font-size: 13px; padding: 12px 14px;
  border: none; border-bottom: 2px solid var(--aev-outline); border-radius: var(--aev-r-xs) var(--aev-r-xs) 0 0;
  outline: none; transition: border-color var(--aev-base); }
.vinput:focus { border-bottom-color: var(--aev-green); }
.vsamples { display: flex; gap: 8px; flex-wrap: wrap; }
.vsample { font-family: var(--aev-font-mono); font-size: 10px; letter-spacing: 0.08em;
  color: var(--aev-cyan); background: rgba(0,240,255,0.06); border: 1px solid rgba(0,240,255,0.25);
  border-radius: var(--aev-r-full); padding: 5px 12px; cursor: pointer; transition: background var(--aev-fast); }
.vsample:hover { background: rgba(0,240,255,0.14); }
.vresult { min-height: 60px; display: flex; flex-direction: column; gap: 8px; justify-content: center;
  border-top: 1px solid var(--aev-ghost); padding-top: 16px; }
.vresult-detail { font-family: var(--aev-font-mono); font-size: 11px; color: var(--aev-fg-dim); }

/* ---- proof city ---- */
.city { display: grid; grid-template-columns: 1.45fr 0.55fr; gap: 20px; align-items: stretch; }
.city-map { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 104px; gap: 10px;
  padding: 22px; background: var(--aev-surface-1); background-image: var(--aev-grid);
  background-size: var(--aev-grid-size); border: 1px solid var(--aev-ghost);
  border-top-color: var(--aev-ghost-top); border-radius: var(--aev-r-md); }
.district { cursor: pointer; background: var(--aev-surface-2); border: 1px solid var(--aev-ghost);
  border-radius: var(--aev-r-sm); padding: 12px 14px; display: flex; flex-direction: column;
  justify-content: space-between; gap: 6px; text-align: left;
  transition: background var(--aev-fast), transform var(--aev-fast), border-color var(--aev-fast); }
.district:hover { background: var(--aev-surface-3); transform: translateY(-1px); }
.district[data-sel="true"] { background: var(--aev-surface-3); border-color: currentColor; }
.district .material-symbols-outlined { font-size: 20px; }
.district-name { font-family: var(--aev-font-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--aev-fg); }
.city-info { background: var(--aev-surface-2); border: 1px solid var(--aev-ghost);
  border-top-color: var(--aev-ghost-top); border-radius: var(--aev-r-md); padding: 22px;
  display: flex; flex-direction: column; gap: 14px; }
.city-info ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.city-info li { font-family: var(--aev-font-mono); font-size: 11px; color: var(--aev-fg-muted);
  padding-left: 14px; position: relative; line-height: 1.5; }
.city-info li::before { content: '\203A'; position: absolute; left: 0; color: var(--aev-fg-faint); }

/* ---- claim firewall ---- */
.fw { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fw-card { background: var(--aev-surface-2); border: 1px solid var(--aev-ghost);
  border-top-color: var(--aev-ghost-top); border-radius: var(--aev-r-md); padding: 20px;
  display: flex; flex-direction: column; gap: 14px; border-left: 2px solid var(--aev-green); }
.fw-card[data-kind="blocked"] { border-left-color: var(--aev-red); }
.fw-lane { position: relative; background: var(--aev-surface-1); border-radius: var(--aev-r-sm);
  padding: 16px; overflow: hidden; min-height: 84px; display: flex; align-items: center; }
.fw-bar { position: absolute; right: 56px; top: 8px; bottom: 8px; width: 2px; }
.fw-bar[data-kind="allowed"] { background: var(--aev-green); box-shadow: var(--aev-glow-green); }
.fw-bar[data-kind="blocked"] { background: var(--aev-red); box-shadow: var(--aev-glow-red); }
.fw-claim { max-width: 70%; font-size: 13.5px; line-height: 1.5; color: var(--aev-fg);
  transform: translateX(0); transition: transform 1100ms var(--aev-ease); }
.fw-claim[data-run="true"] { transform: translateX(28px); }
.fw-claim[data-result="blocked"] { color: var(--aev-fg-dim); text-decoration: line-through;
  text-decoration-color: var(--aev-red); animation: fw-shake 320ms var(--aev-ease); }
@keyframes fw-shake { 0%,100% { transform: translateX(28px); } 30% { transform: translateX(22px); } 60% { transform: translateX(31px); } }
.fw-stamp { position: absolute; right: 10px; top: 50%; transform: translateY(-50%) rotate(8deg) scale(0.6);
  opacity: 0; font-family: var(--aev-font-mono); font-size: 11px; letter-spacing: 0.18em; font-weight: 700;
  padding: 5px 9px; border: 1.5px solid currentColor; border-radius: var(--aev-r-xs);
  transition: opacity 200ms var(--aev-ease), transform 200ms var(--aev-ease); }
.fw-stamp[data-show="true"] { opacity: 1; transform: translateY(-50%) rotate(8deg) scale(1); }
.fw-meta { font-family: var(--aev-font-mono); font-size: 10px; color: var(--aev-fg-dim); letter-spacing: 0.06em; }

/* ---- footer ---- */
.footer { margin-top: 110px; border-top: 1px solid var(--aev-ghost); padding: 88px 32px 56px; }
.footer-inner { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 48px; }
.footer h2 { font-size: var(--aev-text-5xl); max-width: 10em; }
.footer-status { background: var(--aev-surface-1); border: 1px solid var(--aev-ghost);
  border-top-color: var(--aev-ghost-top); border-radius: var(--aev-r-md); padding: 20px;
  font-family: var(--aev-font-mono); font-size: 11.5px; line-height: 2; color: var(--aev-fg-muted); }
.footer-status b { color: var(--aev-fg); font-weight: 500; }
.footer-divisions { max-width: 1240px; margin: 56px auto 0; display: flex; gap: 28px; flex-wrap: wrap;
  border-top: 1px solid var(--aev-ghost); padding-top: 24px; }
.footer-divisions span { font-family: var(--aev-font-mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--aev-fg-dim); }

/* ---- atmosphere ---- */
.site[data-pulse="false"] .aui-pulse { animation: none; }
.scanlines { position: fixed; inset: 0; pointer-events: none; z-index: 40;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.20) 0 1px, transparent 1px 3px); }

@media (prefers-reduced-motion: reduce) {
  .pipe-packet, .fw-claim { transition: none; }
  .fw-claim[data-result="blocked"] { animation: none; }
}
@media (max-width: 1160px) {
  .nav-links a:not(.aui-btn) { display: none; }
}
@media (max-width: 980px) {
  .hero, .verifier, .city, .footer-inner { grid-template-columns: 1fr; }
  .scards { grid-template-columns: repeat(2, 1fr); }
  .rwall, .fw { grid-template-columns: 1fr; }
  .pipe { grid-template-columns: repeat(2, 1fr); }
  .pipe-rail { display: none; }
}