/* ==========================================================================
   X7 AI Systems — flagship constellation layer (loads AFTER styles.css)
   Corporate sky: midnight #070b14 · starlight #eef2f8 · hairline #223052 ·
   gold #f3a72e. Dr Albert keeps its electric blue inside its own chapter.
   ========================================================================== */

:root {
  --midnight: #070b14;
  --starlight: #eef2f8;
  --hairline: #223052;
  --x7gold: #f3a72e;
  --skytext: #93a3c4;
  --petrol: #17705c;
}

/* ---------- Hero sky ---------- */
.sky {
  position: relative;
  overflow: hidden;
  padding: 148px 0 34px;
  background:
    radial-gradient(1100px 520px at 78% 10%, rgba(34, 48, 82, 0.55), transparent 64%),
    radial-gradient(900px 500px at 12% 88%, rgba(34, 48, 82, 0.35), transparent 60%),
    var(--midnight);
}

.sky-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 34px;
  align-items: center;
}

.sky-eyebrow {
  margin: 0 0 18px;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--x7gold);
}

.sky h1 {
  margin: 0;
  max-width: 560px;
  color: var(--starlight);
  font-size: clamp(38px, 4.6vw, 62px);
  line-height: 1.04;
  letter-spacing: -0.015em;
}

.sky-lede {
  max-width: 540px;
  margin: 22px 0 0;
  color: var(--skytext);
  font-size: 18px;
  line-height: 1.6;
}

.sky-lede strong { color: var(--starlight); font-weight: 600; }

.sky-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.btn--gold {
  background: var(--x7gold);
  border-color: var(--x7gold);
  color: #131722;
}
.btn--gold:hover, .btn--gold:focus { background: #ffc258; border-color: #ffc258; color: #131722; }

.btn--sky {
  border: 1px solid var(--hairline);
  color: var(--starlight);
  background: rgba(34, 48, 82, 0.24);
}
.btn--sky:hover, .btn--sky:focus { background: rgba(34, 48, 82, 0.5); }

/* ---------- Constellation map ---------- */
.sky-map { position: relative; }

.cmap { display: block; width: 100%; height: auto; }

.cmap .hair { stroke: var(--hairline); stroke-width: 1.1; opacity: 0.9; }
.cmap .hair--far { opacity: 0.38; }

.cmap .bgstar { fill: var(--starlight); }

.cmap .spark { fill: var(--starlight); transition: transform 0.35s ease, filter 0.35s ease; transform-box: fill-box; transform-origin: center; }
.cmap .spark--gold { fill: var(--x7gold); }

.cmap .nlabel { fill: var(--starlight); font-family: Inter, Arial, sans-serif; font-size: 13px; font-weight: 700; }
.cmap .nrole { fill: #7d90b8; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; }

.cmap a:hover .spark, .cmap a:focus .spark { transform: scale(1.35); filter: drop-shadow(0 0 10px rgba(243, 167, 46, 0.85)); }
.cmap a:hover .nlabel, .cmap a:focus .nlabel { fill: var(--x7gold); }
.cmap a:focus-visible { outline: 2px solid var(--x7gold); outline-offset: 4px; border-radius: 4px; }

@keyframes cmapTwinkle { 0%, 100% { opacity: 0.14; } 50% { opacity: 0.4; } }
.cmap .tw { animation: cmapTwinkle 5.5s ease-in-out infinite; }
.cmap .tw2 { animation-duration: 7.5s; animation-delay: -2.6s; }
.cmap .tw3 { animation-duration: 9s; animation-delay: -4.4s; }

@keyframes cmapForming { 0%, 100% { opacity: 0.2; } 50% { opacity: 0.75; } }
.cmap .forming { animation: cmapForming 6s ease-in-out infinite; }

@keyframes cmapBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.cmap .spark--principal { animation: cmapBreathe 8s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .cmap .tw, .cmap .tw2, .cmap .tw3, .cmap .forming, .cmap .spark--principal { animation: none; }
}

/* ---------- Star index (labelled strip: the map is never the sole nav) ---------- */
.star-index {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 44px;
  padding-top: 26px;
  border-top: 1px solid rgba(34, 48, 82, 0.7);
}

.star-index a {
  display: grid;
  gap: 3px;
  padding: 12px 14px;
  border: 1px solid rgba(34, 48, 82, 0.65);
  border-radius: 10px;
  background: rgba(10, 16, 30, 0.55);
  text-decoration: none;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.star-index a:hover, .star-index a:focus { border-color: var(--x7gold); background: rgba(34, 48, 82, 0.4); }
.star-index b { color: var(--starlight); font-size: 13.5px; }
.star-index span {
  color: #7d90b8;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---------- Section framing on the sky ---------- */
.sec-sky { background: var(--midnight); }
.sec-sky .section-head h2 { color: var(--starlight); }
.sec-sky .section-head p { color: var(--skytext); }
.sec-sky .eyebrow { color: var(--x7gold); }

/* ---------- Estate grid ---------- */
.estate-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 34px;
}

.estate-card {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 14px;
  align-items: center;
  padding: 18px;
  border: 1px solid rgba(34, 48, 82, 0.7);
  border-radius: 14px;
  background: rgba(10, 16, 30, 0.6);
  text-decoration: none;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.estate-card:hover, .estate-card:focus { transform: translateY(-3px); border-color: var(--x7gold); }
.estate-card img { width: 56px; height: 56px; border-radius: 12px; display: block; }
.estate-card b { display: block; color: var(--starlight); font-size: 15px; }
.estate-card span {
  display: block;
  margin-top: 3px;
  color: #7d90b8;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.estate-card--concept { background: linear-gradient(145deg, rgba(6, 19, 21, 0.92), rgba(10, 16, 30, 0.72)); }
.estate-card--concept em {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 8px;
  border: 1px solid rgba(243, 167, 46, 0.5);
  border-radius: 999px;
  color: var(--x7gold);
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 9.5px;
  font-style: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---------- The Handover demo ---------- */
.ho-wrap { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 34px; align-items: stretch; margin-top: 10px; }

.ho-card {
  border: 1px solid rgba(34, 48, 82, 0.8);
  border-radius: 16px;
  background: rgba(10, 16, 30, 0.72);
  padding: 26px;
}

.ho-state {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px;
  border-radius: 999px;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: 1px solid rgba(243, 167, 46, 0.55);
  color: var(--x7gold);
  background: rgba(243, 167, 46, 0.08);
  transition: all 0.35s ease;
}
.ho-state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

.ho-card[data-state="recorded"] .ho-state {
  border-color: rgba(23, 112, 92, 0.9);
  color: #4fd1ae;
  background: rgba(23, 112, 92, 0.14);
}
.ho-card[data-state="declined"] .ho-state {
  border-color: rgba(125, 144, 184, 0.5);
  color: #93a3c4;
  background: rgba(34, 48, 82, 0.3);
}

.ho-title { margin: 18px 0 6px; color: var(--starlight); font-size: 19px; font-weight: 700; }
.ho-desc { margin: 0; color: var(--skytext); font-size: 14.5px; line-height: 1.6; }

.ho-meta {
  min-height: 22px;
  margin: 14px 0 0;
  color: #4fd1ae;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 12px;
}
.ho-card[data-state="declined"] .ho-meta { color: #93a3c4; }

.ho-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

.ho-btn {
  padding: 11px 18px;
  border-radius: 10px;
  border: 1px solid var(--hairline);
  background: rgba(34, 48, 82, 0.3);
  color: var(--starlight);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
}
.ho-btn--record { border-color: rgba(243, 167, 46, 0.65); background: rgba(243, 167, 46, 0.1); color: var(--x7gold); }
.ho-btn--record:hover, .ho-btn--record:focus { background: rgba(243, 167, 46, 0.22); }
.ho-btn--machine { border-style: dashed; color: #7d90b8; }
.ho-btn:hover, .ho-btn:focus { border-color: var(--starlight); }
.ho-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.ho-refusal {
  min-height: 20px;
  margin: 14px 0 0;
  color: #ff9d9d;
  font-size: 13.5px;
}

@keyframes hoShake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
.ho-card.shake { animation: hoShake 0.45s ease; }
@media (prefers-reduced-motion: reduce) { .ho-card.shake { animation: none; } }

.ho-law { margin: 0; padding: 6px 0; list-style: none; display: grid; gap: 14px; align-content: space-between; height: 100%; }
.ho-law li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; color: var(--skytext); font-size: 15px; line-height: 1.55; }
.ho-law li b { color: var(--starlight); }
.ho-law .lawdot {
  width: 26px; height: 26px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(243, 167, 46, 0.5);
  color: var(--x7gold);
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 11px;
}

/* ---------- Governance strip ---------- */
.gov-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 26px;
}
.gov-strip div {
  padding: 16px 18px;
  border-left: 2px solid var(--x7gold);
  background: rgba(10, 16, 30, 0.55);
  border-radius: 0 12px 12px 0;
  color: var(--skytext);
  font-size: 14px;
  line-height: 1.55;
}
.gov-strip b { color: var(--starlight); }

/* ---------- Corporate footer signature ---------- */
.x7-sig { display: inline-flex; align-items: center; gap: 12px; margin-top: 18px; }
.x7-sig svg { display: block; }
.x7-sig span {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8fa0c0;
}

/* ---------- Header brand lockup ---------- */
.brand-lockup7 { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.brand-lockup7 svg { display: block; }
.brand-lockup7 .bl-name { color: var(--starlight); font-weight: 800; font-size: 16.5px; letter-spacing: 0.02em; white-space: nowrap; }
.brand-lockup7 .bl-name i { font-style: normal; color: var(--x7gold); }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .star-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .estate-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sky { padding-top: 120px; }
  .sky-grid { grid-template-columns: 1fr; gap: 20px; }
  .sky h1, .sky-lede { max-width: 640px; }
  .ho-wrap { grid-template-columns: 1fr; }
}

/* capture aid (?at=<id>) — force reveals visible for headless screenshots */
html.unveil .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
html.unveil .stats-reveal .stat { opacity: 1 !important; }

/* reduced-motion: no slide-reveals, no smooth anchor scrolling */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .reveal { transition: none !important; transform: none !important; }
}

/* contact routing panel (x7systems.ai variant — no backend on this project) */
.route-panel {
  border: 1px solid rgba(34, 48, 82, 0.8);
  border-radius: 16px;
  background: rgba(10, 16, 30, 0.72);
  padding: 28px;
}
.route-panel h3 { margin: 0 0 14px; color: var(--starlight); }
.route-panel p { margin: 10px 0; color: var(--skytext); }
.route-panel b { color: var(--starlight); }
.route-panel a { color: var(--x7gold); }
.route-panel a.btn { color: #131722; text-decoration: none; }

@media (max-width: 600px) {
  .estate-grid { grid-template-columns: 1fr; }
  .star-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}