/* starplex.dev
   Layout: one dark page in the Starblaze.ai family. The hero board is the only moving thing; everything below explains what Starplex is, in order. */
:root {
  /* Starblaze.ai tokens, kept so the two sites read as one family. */
  --deep-space: #0B0E14;
  --cosmos-navy: #0A1B2E;
  --panel: #101826;
  --star-white: #F5F8FF;
  --blue-300: #7ECDF7;
  --blue-500: #4FC3F7;
  --blaze-300: #FFA958;
  --blaze-500: #FF7A18;
  --on-blaze: #1A0D02;
  --ink-200: #B0BACB;
  --ink-300: #95A1B2;
  --ink-400: #7C88A0;
  --border: rgba(245, 248, 255, 0.10);
  --scrim: 11, 14, 20;
  --font: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --measure: 62ch;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--deep-space); color: var(--star-white); font-family: var(--font); font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: var(--blue-300); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--star-white); }
a:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 3px; border-radius: 2px; }
::selection { background: rgba(79, 195, 247, 0.35); }
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }

/* ---------- header ---------- */
.site-header { position: absolute; inset: 0 0 auto 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; padding-block: 1.25rem; padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--star-white); text-decoration: none; font-weight: 600; font-size: 1.25rem; letter-spacing: -0.01em; }
.brand svg { width: 26px; height: 26px; }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; min-height: 720px; display: flex; align-items: flex-end; padding-block: 7rem 4.5rem;
  background: radial-gradient(ellipse at 22% 12%, rgba(79,195,247,0.14) 0%, transparent 55%), radial-gradient(ellipse at 80% 85%, rgba(255,122,24,0.12) 0%, transparent 55%), var(--deep-space); }
.hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(var(--scrim),0.95) 0%, rgba(var(--scrim),0.6) 45%, transparent 70%); }
.hero-copy { position: relative; z-index: 2; max-width: 40rem; }
.rule { font-family: var(--mono); font-size: 0.75rem; color: var(--ink-300); display: flex; align-items: center; gap: 0.75rem; margin: 0 0 1.5rem; }
.rule::before { content: ''; width: 2rem; height: 1px; background: var(--blue-500); }
h1 { font-size: clamp(2.5rem, 6.4vw, 4.75rem); line-height: 1.03; letter-spacing: -0.03em; font-weight: 600; margin: 0 0 1.5rem; text-wrap: balance; }
/* The key words carry a gradient underline rather than gradient-filled letters. The line is as thick as the letters' horizontal strokes (0.105em) and its bottom is level with the descenders (0.199em below the baseline, measured for Space Grotesk 600); a halo in the page color around each letter breaks it where descenders cross, as text-decoration-skip-ink does for a plain underline. */
h1 em { font-style: normal; background-image: linear-gradient(100deg, var(--blue-500), var(--blaze-500)); background-repeat: no-repeat; background-size: 100% 0.105em; background-position: 0 calc(100% - 0.093em);
  text-shadow: 0.05em 0 var(--deep-space), -0.05em 0 var(--deep-space), 0.035em 0.035em var(--deep-space), -0.035em 0.035em var(--deep-space), 0 0.05em var(--deep-space), 0.035em -0.035em var(--deep-space), -0.035em -0.035em var(--deep-space); }
.lede { font-size: clamp(1.1rem, 1.6vw, 1.25rem); color: var(--ink-200); max-width: 35rem; margin: 0 0 2rem; text-wrap: pretty; }
.lede strong { color: var(--star-white); font-weight: 500; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0.7rem 1.25rem; border-radius: 6px; background: var(--blaze-500); color: var(--on-blaze); font-weight: 600; text-decoration: none; box-shadow: 0 0 0 1px rgba(255,122,24,0.5), 0 0 24px rgba(255,122,24,0.3); }
.btn:hover { background: var(--blaze-300); color: var(--on-blaze); }

.board-wrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; padding-block: 6rem 3rem; padding-left: var(--gutter); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }
.board { width: min(600px, 100%); font-family: var(--mono); font-size: 0.76rem; line-height: 1.95; color: var(--ink-300); background: rgba(10,27,46,0.55); border: 1px solid var(--border); border-radius: 10px; padding: 1rem 1.25rem; backdrop-filter: blur(6px); }
.board .row { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr) 4.2rem 6rem; gap: 0.75rem; white-space: nowrap; }
.board .id { color: var(--ink-400); }
.board .ti { color: var(--ink-200); overflow: hidden; text-overflow: ellipsis; }
.board .st { color: var(--blue-300); }
.board .st.ship { color: var(--blaze-300); }
.board .bar { position: relative; height: 4px; align-self: center; background: rgba(245,248,255,0.07); border-radius: 2px; overflow: hidden; }
.board .bar i { position: absolute; inset: 0; transform-origin: left center; transform: scaleX(0); background: var(--blue-500); border-radius: 2px; box-shadow: 0 0 8px var(--blue-500); }
.board .bar i.ship { background: var(--blaze-500); box-shadow: 0 0 8px var(--blaze-500); }
.board .foot { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--border); display: flex; justify-content: space-between; color: var(--ink-400); }

/* ---------- body sections ---------- */
section.block { padding-block: 5.5rem; border-top: 1px solid var(--border); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); line-height: 1.15; letter-spacing: -0.02em; font-weight: 600; margin: 0 0 1rem; text-wrap: balance; }
h3 { font-size: 1.2rem; line-height: 1.3; font-weight: 600; margin: 0 0 0.5rem; text-wrap: balance; }
p { margin: 0 0 1rem; color: var(--ink-200); max-width: var(--measure); text-wrap: pretty; }
.intro { max-width: 46rem; margin-bottom: 2.75rem; }
.intro p { font-size: 1.125rem; }

/* The four parts of the factory. */
.parts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
/* Four parts always fill whole rows: one column, then two by two, then four across. */
@media (min-width: 640px) { .parts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .parts { grid-template-columns: repeat(4, 1fr); } }
.parts li { background: var(--deep-space); padding: 1.75rem 1.5rem; min-width: 0; }
.parts .kind { font-family: var(--mono); font-size: 0.75rem; color: var(--blue-300); margin: 0 0 0.75rem; }
.parts p { margin: 0; font-size: 1rem; }

/* Where things run. */
.fit { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 1.25rem; align-items: stretch; }
.zone { border: 1px solid var(--border); border-radius: 10px; padding: 1.5rem; background: var(--panel); min-width: 0; }
.zone.yours { border-color: rgba(79,195,247,0.35); }
.zone.ours { border-color: rgba(255,122,24,0.35); }
.zone .where { font-family: var(--mono); font-size: 0.75rem; margin: 0 0 1rem; }
.zone.yours .where { color: var(--blue-300); }
.zone.ours .where { color: var(--blaze-300); }
.zone ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.zone li { border-left: 2px solid var(--border); padding-left: 0.9rem; color: var(--ink-200); font-size: 0.975rem; }
.zone li b { color: var(--star-white); font-weight: 600; display: block; }
.link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; font-family: var(--mono); font-size: 0.75rem; color: var(--ink-300); text-align: center; }
.link .line { width: 2px; flex: 1; min-height: 2rem; background: linear-gradient(var(--blue-500), var(--blaze-500)); border-radius: 1px; }
.fit-note { margin-top: 1.5rem; }

/* Checks that scale with risk. */
.risk { width: 100%; border-collapse: collapse; font-size: 0.975rem; }
.risk-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; }
.risk th, .risk td { text-align: left; vertical-align: top; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); }
.risk tr:last-child td { border-bottom: 0; }
.risk thead th { font-family: var(--mono); font-size: 0.75rem; font-weight: 500; color: var(--ink-300); background: var(--panel); }
.risk td:first-child { font-weight: 600; white-space: nowrap; }
.risk td { color: var(--ink-200); }
.risk .lvl { display: inline-flex; align-items: center; gap: 0.5rem; }
.risk .lvl::before { content: ''; width: 8px; height: 8px; border-radius: 50%; }
.risk .low::before { background: var(--blue-500); }
.risk .med::before { background: linear-gradient(135deg, var(--blue-500), var(--blaze-500)); }
.risk .high::before { background: var(--blaze-500); box-shadow: 0 0 8px var(--blaze-500); }

/* Start small, grow. */
.grow { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.grow > div { border: 1px solid var(--border); border-radius: 10px; padding: 1.75rem 1.5rem; min-width: 0; }
.grow .when { font-family: var(--mono); font-size: 0.75rem; color: var(--ink-300); margin: 0 0 0.75rem; }
.grow .later { background: radial-gradient(ellipse at 100% 0%, rgba(255,122,24,0.10), transparent 60%), var(--panel); }
.grow p { margin: 0; }

.invite { background: radial-gradient(ellipse at 85% 0%, rgba(255,122,24,0.12), transparent 60%), var(--cosmos-navy); }
.invite .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1rem 4rem; align-items: start; }
.addr { color: var(--star-white); font-weight: 500; user-select: all; }
.support .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1rem 4rem; align-items: start; }
.support h2 { font-size: clamp(1.3rem, 2.4vw, 1.75rem); }
.support-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0.55rem 1.1rem; border: 1px solid rgba(79,195,247,0.45); border-radius: 6px; color: var(--blue-300); text-decoration: none; font-weight: 500; }
.support-link:hover { background: rgba(79,195,247,0.08); color: var(--star-white); }
@media (max-width: 760px) { .invite .wrap, .support .wrap { grid-template-columns: 1fr; } }
.site-footer { padding-block: 2.5rem 3rem; border-top: 1px solid var(--border); }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; }
.site-footer p { margin: 0; font-size: 0.875rem; color: var(--ink-300); }
.site-footer .sign { font-size: 1.125rem; color: var(--star-white); font-weight: 500; }

/* Below 1100px the board leaves the space behind the copy and sits under it. */
@media (max-width: 1100px) {
  .hero { min-height: 0; flex-direction: column; align-items: stretch; padding-block: 6.5rem 3.5rem; }
  .hero::after { display: none; }
  /* Without the scrim, keep the tints off the headline so the underline's halo matches the page behind it. */
  .hero { background: radial-gradient(ellipse at 85% 70%, rgba(79,195,247,0.12) 0%, transparent 55%), radial-gradient(ellipse at 80% 100%, rgba(255,122,24,0.12) 0%, transparent 55%), var(--deep-space); }
  .board-wrap { position: static; order: 2; justify-content: flex-start; padding-block: 2.5rem 0; padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); }
}
@media (max-width: 860px) {
  .fit { grid-template-columns: 1fr; }
  .link { flex-direction: row; }
  .link .line { width: auto; height: 2px; min-height: 0; flex: 1; background: linear-gradient(90deg, var(--blue-500), var(--blaze-500)); }
}
@media (max-width: 760px) {
  .board .row { grid-template-columns: 4.2rem minmax(0, 1fr) 3.8rem 3rem; }
  .grow { grid-template-columns: 1fr; }
  section.block { padding-block: 4rem; }
}