/* SIMARC landing — colour field, glass, and very few words.
   Deliberately separate from site.css: the interior pages keep the
   institutional light system, so nothing here can break them. */

:root {
  /* The field. Swap these five and the whole page changes colour. */
  --field-deep:  #4C1D95;
  --field-mid:   #7B2FE0;
  --field-lift:  #A742E8;
  --field-glow:  #E879F9;
  --field-ink:   #2E0B6E;

  --paper:   #FFFFFF;
  --surface: #F5F7FB;
  --ink:     #0C1330;
  --ink-2:   #3A4560;
  --muted:   #6B7691;
  --line:    #E4E8F2;
  --signal:  #7B2FE0;

  --font-text: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  --shell: 1280px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.shell { max-width: var(--shell); margin: 0 auto; padding: 0 40px; }

/* ---------- header: a dark bar riding over the field ---------- */
header.top {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  background: #08090F;
}
header.top .bar {
  max-width: var(--shell); margin: 0 auto; padding: 0 40px;
  height: 72px; display: flex; align-items: center; gap: 40px;
}
header.top .word {
  display: flex; align-items: center; gap: 11px;
  color: #fff; text-decoration: none;
}
header.top .word img { width: 28px; height: 28px; }
header.top .word .lock { display: flex; flex-direction: column; line-height: 1; }
header.top .word .name { font-weight: 700; font-size: 19px; letter-spacing: 0.14em; }
header.top .word .full {
  font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.17em;
  text-transform: uppercase; color: rgba(255,255,255,0.52);
  margin-top: 6px; white-space: nowrap;
  /* the full name is 288px of tracked mono — nearly four times the wordmark.
     If it is ever the widest thing in the bar it must give way rather than
     push "For agents" off the edge, so it is allowed to shrink and clip. */
  overflow: hidden; text-overflow: ellipsis;
}
header.top .word, header.top .word .lock { min-width: 0; }
header.top .word .name { white-space: nowrap; }
header.top nav { display: flex; gap: 30px; align-items: center; }
header.top nav a {
  color: rgba(255,255,255,0.82); text-decoration: none;
  font-size: 15px; font-weight: 400;
}
header.top nav a:hover { color: #fff; }
header.top .enter {
  margin-left: auto;
  font-family: var(--font-mono); font-size: 13px; font-weight: 500;
  color: #fff; text-decoration: none;
  border: 1px solid rgba(255,255,255,0.35);
  padding: 9px 16px; border-radius: 4px;
}
header.top .enter:hover { background: rgba(255,255,255,0.12); }

/* ---------- the field ---------- */
.field {
  position: relative; overflow: hidden;
  min-height: 100vh; display: flex; align-items: center;
  padding: 132px 0 80px;
  background:
    radial-gradient(1000px 700px at 78% 8%, var(--field-glow) 0%, transparent 56%),
    radial-gradient(760px 620px at 99% 72%, #2BC8E8 0%, transparent 58%),
    radial-gradient(900px 700px at 62% 96%, var(--field-lift) 0%, transparent 60%),
    linear-gradient(118deg, var(--field-ink) 0%, var(--field-deep) 26%, var(--field-mid) 64%, var(--field-lift) 100%);
}
/* faint vertical survey lines, as on a plate */
#dimensions {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; pointer-events: none; z-index: 1;
}
/* the figure is grabbable, but the column holding the type and the buttons
   is not — the canvas itself never takes pointer events, so nothing under it
   stops being clickable */
.field:has(#dimensions) { cursor: grab; }
.field.grabbing { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.field .shell, .field .figcap { cursor: auto; }
/* the mast sits in a pool of shade so the type stays legible over the lattice */
.field::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(96deg,
    rgba(28,8,74,0.80) 0%, rgba(28,8,74,0.55) 30%,
    rgba(28,8,74,0.10) 55%, transparent 74%);
}
.figcap {
  position: absolute; right: 40px; bottom: 26px; z-index: 3;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.15em;
  text-transform: uppercase; color: rgba(255,255,255,0.42);
}
.field .shell { position: relative; z-index: 2; width: 100%; }

.mast { max-width: 620px; }
.mast h1 {
  margin: 0 0 26px;
  font-size: clamp(42px, 5.9vw, 76px);
  font-weight: 500; line-height: 1.0; letter-spacing: -0.015em;
  color: #fff; text-wrap: balance;
}
.mast p.sub {
  margin: 0; max-width: 430px;
  color: rgba(255,255,255,0.86); font-size: 17px; line-height: 1.5;
}
.mast .cta { margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 14px; font-weight: 500;
  text-decoration: none; padding: 13px 22px; border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.55); color: #fff;
  transition: background .18s ease, border-color .18s ease;
}
.btn:hover { background: rgba(255,255,255,0.14); border-color: #fff; }
.btn.solid { background: #fff; color: var(--field-deep); border-color: #fff; }
.btn.solid:hover { background: rgba(255,255,255,0.88); }

/* ---------- light sections ---------- */
section.band { padding: 104px 0; }
.eyebrow {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 18px;
}
h2.big {
  margin: 0 0 18px; color: var(--ink);
  font-size: clamp(30px, 3.6vw, 46px); font-weight: 500;
  line-height: 1.08; letter-spacing: -0.015em; max-width: 700px;
}
p.lede { margin: 0; max-width: 560px; color: var(--muted); font-size: 17px; }

.four {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr));
  gap: 18px; margin-top: 52px;
}
.prog {
  display: block; text-decoration: none; padding: 30px 26px 26px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.prog:hover {
  border-color: var(--signal); transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(123,47,224,0.15);
}
.prog .code {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--signal); margin-bottom: 34px;
}
.prog h3 {
  margin: 0 0 10px; color: var(--ink);
  font-size: 21px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.15;
}
.prog .q { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.45; }

/* ---------- the doctrine band ---------- */
.doctrine {
  position: relative; overflow: hidden; padding: 112px 0;
  background:
    radial-gradient(800px 500px at 20% 20%, var(--field-lift) 0%, transparent 60%),
    linear-gradient(112deg, var(--field-ink) 0%, var(--field-deep) 46%, var(--field-mid) 100%);
}
.doctrine blockquote {
  margin: 0; max-width: 900px; color: #fff;
  font-size: clamp(24px, 3.1vw, 40px); font-weight: 500;
  line-height: 1.18; letter-spacing: -0.015em;
}
.doctrine .attrib {
  margin-top: 26px; font-family: var(--font-mono); font-size: 12.5px;
  letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.62);
}

/* ---------- footer ---------- */
footer.base { background: #08090F; color: rgba(255,255,255,0.62); padding: 58px 0 40px; }
footer.base .row { display: flex; gap: 40px; flex-wrap: wrap; align-items: flex-start; }
footer.base .word {
  display: flex; align-items: center; gap: 10px; color: #fff;
  font-weight: 700; letter-spacing: 0.14em; font-size: 17px; text-decoration: none;
}
footer.base .word img { width: 24px; height: 24px; }
footer.base nav { margin-left: auto; display: flex; gap: 28px; flex-wrap: wrap; }
footer.base nav a { color: rgba(255,255,255,0.62); text-decoration: none; font-size: 14.5px; }
footer.base nav a:hover { color: #fff; }
footer.base .fine {
  margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.12);
  display: flex; gap: 20px; justify-content: space-between; flex-wrap: wrap;
  font-size: 13px; color: rgba(255,255,255,0.44);
}
footer.base .fine .mono { font-family: var(--font-mono); }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  /* headline first on a phone; the glass follows and still runs off the edge */
  .field { min-height: 88vh; padding: 116px 0 190px; }
  header.top nav { display: none; }
}
@media (max-width: 640px) {
  .shell, header.top .bar { padding-left: 22px; padding-right: 22px; }
  /* below this the bar cannot hold the lockup and the button at once: the
     lockup alone is 327px of a 375px phone. The mark and the wordmark say
     enough; the full name is on every page below the fold anyway. */
  header.top .word .full { display: none; }
  section.band, .doctrine { padding: 72px 0; }
  .figcap { left: 22px; right: 22px; bottom: 20px; text-align: right;
            font-size: 9px; letter-spacing: 0.11em; line-height: 1.7; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }