:root{
  --maxw: 1040px;

  --bg:#0a0f15;

  --text:#e8eef7;
  --muted:#a9b6c7;

  --accent:#7dd3fc;
  --accent2:#a78bfa;

  --stroke: rgba(255,255,255,.09);

  --radius: 12px;
  --shadow: 0 14px 40px rgba(0,0,0,.38);

  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  --sans: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

*{ box-sizing:border-box; }
html, body{ height:100%; }

body{
  margin:0;
  font-family:var(--sans);
  color:var(--text);

  /* Always padding at window border */
  padding: 18px 18px 26px;

  background:
    radial-gradient(1200px 700px at 20% -10%, rgba(125,211,252,.12), transparent 55%),
    radial-gradient(1000px 600px at 90% 0%, rgba(167,139,250,.10), transparent 60%),
    url("/assets/img/bg-nebula.png") center / cover fixed,
    var(--bg);
}

@media (max-width: 520px){
  body{ padding: 12px 12px 18px; }
}

/* ---------- Global max-width container (used by your HTML) ---------- */
.wrap{
  max-width: var(--maxw);
  margin: 0 auto;
}

/* consistent vertical spacing for main */
.stack{
  display: grid;
  gap: 14px;
}

/* ---------- Header (used by your HTML) ---------- */
.top{
  padding: 6px 0 10px;
}

.pageTitle{
  margin:0;
  font-size: 36px;
  font-weight: 800;
  letter-spacing: .2px;
}
@media (max-width: 520px){
  .pageTitle{ font-size: 28px; }
}

/* ---------- Cards ---------- */
.card{
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  background: rgba(15,23,38,.62);
  overflow:hidden;
  padding: 12px;
}

/* Slightly “harder” look (less bubbly) */
.card--hero{ padding: 16px; }
.card--diagram{ background: rgba(15,23,38,.58); }

.card--panel{
  background: rgba(15,26,43,.70);
  padding: 16px;
  position: sticky;
  top: 14px;
  height: fit-content;
}
@media (max-width: 920px){
  .card--panel{ position: static; }
}

/* ---------- Typography helpers ---------- */
.h2{
  margin:0;
  font-size: 18px;
  font-weight: 740;
}

.lead{
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.mutedSmall{
  margin: 10px 0 0;
  color: rgba(232,238,247,.65);
  font-size: 12px;
}

/* Hero headline emphasis (optional if you use h2--hero) */
.h2--hero{
  font-size: 42px;
  line-height: 1.15;
  margin-bottom: 10px;
}
.heroIntro .lead{ font-size: 18px; }

@media (max-width: 520px){
  .h2--hero{ font-size: 32px; }
  .heroIntro .lead{ font-size: 16px; }
}

/* ---------- Hero layout ---------- */
.heroIntro{
  padding: 4px 2px 10px;
}

.heroGrid2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 10px;
  align-items: stretch;
}

@media (max-width: 920px){
  .heroGrid2{ grid-template-columns: 1fr; }
}

/* kicker used in hero and panel */
.kicker{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: rgba(232,238,247,.68);
}

/* ---------- Bullet lists (base) ---------- */
.ticks{
  list-style:none;
  padding:0;
  margin:0;
  color: rgba(232,238,247,.90);
  font-size: 14px;
  line-height: 1.5;
}

/* Dot */
.tick{
  display:inline-block;
  width:10px;
  height:10px;
  border-radius: 999px;
  margin-right: 10px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  vertical-align: middle;
}

/* --- Align bullets across the two hero blocks (no JS) --- */
.heroBlock .kicker{
  margin-bottom: 14px;
}

.heroBlock .ticks{
  display: grid;
  row-gap: 10px;

  /* fixed slot height so left/right rows align */
  grid-auto-rows: 3.2em;     /* adjust if needed */
  align-content: start;
}

.heroBlock .ticks li{
  display: flex;
  align-items: flex-start;
}

.heroBlock .ticks .tick{
  margin-top: 0.25em;
  flex: 0 0 auto;
}

/* --- Horizontal contact row (doesn't affect other .ticks usage) --- */
.ticks.contactRow{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

/* override heroBlock grid layout when used as contactRow */
.heroBlock .ticks.contactRow{
  display: flex;
  grid-auto-rows: unset;
  row-gap: 0;
}

/* since .btn already styles as inline-flex, make li behave nicely */
.ticks.contactRow li{
  list-style: none;
  margin: 3;
  padding: 3;
}

/* Larger contact buttons */
.contactRow--large .btn {
  font-size: 0.95rem;         /* slightly larger text */
  padding: 0.55em 0.9em;     /* THIS is why they feel small now */
  min-height: 2.4em;         /* consistent button height */
  display: inline-flex;
  align-items: center;
}

/* Make links fill the button (important for click area) */
.contactRow--large .btn a {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}


/* ---------- Montage banner ---------- */
.montageHero{
  padding: 10px;
  background: rgba(10,15,21,.18);
  border: 1px solid rgba(255,255,255,.07);
}

.montageFrame{
  position: relative;
  border-radius: calc(var(--radius) - 2px);
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.08);
}

.montageImg{
  width:100%;
  height: auto;
  display:block;
  filter: saturate(1.05) contrast(1.05);
  transform: scale(1.01);
}

.montageFrame::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(1000px 260px at 50% 40%, transparent 35%, rgba(0,0,0,.38) 92%),
    linear-gradient(to bottom, rgba(0,0,0,.32), transparent 30%, transparent 70%, rgba(0,0,0,.32));
}

.montageCaption{
  margin-top: 10px;
  color: rgba(232,238,247,.62);
  font-size: 12px;
}

/* ---------- Diagram layout ---------- */
.diagramGrid{
  display:grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 14px;
}
@media (max-width: 920px){
  .diagramGrid{ grid-template-columns: 1fr; }
}

.cardTop{
  padding: 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
}

.tabs{
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.tab{
  font-size: 13px;
  color: var(--text);
  text-decoration:none;
  padding: 10px 12px;

  border: 1px solid rgba(255,255,255,.10);
  background: rgba(10,15,21,.24);
  border-radius: 999px;

  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.tab:hover{
  transform: translateY(-1px);
  background: rgba(10,15,21,.34);
  border-color: rgba(125,211,252,.35);
}

.tab.active{
  background: rgba(125,211,252,.14);
  border-color: rgba(125,211,252,.45);
}

.diagramWrap{
  padding: 12px;
  background: rgba(10,15,21,.12);
}

/* ---------- Panel ---------- */
.panelTitle{
  margin: 8px 0 6px;
  font-size: 20px;
  font-weight: 760;
}

.panelDesc{
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.bullets{
  margin: 12px 0 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(232,238,247,.92);
}

/* ---------- Buttons ---------- */
.actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 12px;
}

.btn{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(10,15,21,.22);
  color: var(--text);

  border-radius: 10px;
  padding: 10px 12px;

  font-size: 13px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;

  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.btn:hover{
  transform: translateY(-1px);
  background: rgba(10,15,21,.34);
  border-color: rgba(125,211,252,.30);
}

/* Light button variant (inherits .btn) */
.btn.btn--light{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
}

/* Make the link inside look right (avoid default purple/blue) */
.btn.btn--light a{
  color: inherit;
  text-decoration: none;
}

.btn.btn--light:hover{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.28);
}


.dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
}

/* ---------- SVG interaction ---------- */
.bg-hit{ cursor:pointer; }
.bg-hit:hover{ fill: rgba(0,255,170,.12); }

.node{ cursor:pointer; }
.node .block{
  transition: filter .18s ease, transform .18s ease, stroke .18s ease;
  transform-origin: center;
}

.node:hover .block,
.node.active .block{
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.28));
  transform: translateY(-1px);
}

.node text{ pointer-events:none; }

svg.system-active .node .block{
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.30))
          drop-shadow(0 0 14px rgba(0,255,170,.10));
}

/* ---------- Footer ---------- */
.footer{
  padding-top: 8px;
  color: rgba(232,238,247,.50);
  font-size: 12px;
}

/* Stories list container */
.stories{
  display:flex;
  flex-direction:column;
  gap:18px;                 /* space BETWEEN story frames (shows background) */
  margin-top:14px;
}

/* Each story becomes its own frame/card */
.story{
  padding:16px 16px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);  /* subtle so it still matches the site */
  box-shadow: 0 10px 30px rgba(0,0,0,.25);

  display:flex;
  flex-direction:column;
  gap:12px;
}

/* Image + bullets row */
.storyRow{
  display:flex;
  gap:14px;
  align-items:flex-start;
}

/* Small image slot */
.storyImg{
  flex:0 0 96px;
  height:72px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  overflow:hidden;
}

.storyImg img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}