/* Gemstation — shared stylesheet for index.html and about.html.
   privacy.html keeps its own smaller sheet: its sections are plain document
   sections, not the site's bordered bands. */

/* Space Grotesk with Manrope's W and w patched in (see fonts/README.md).
   Only 400 and 700 exist — any other weight would synthesize and lose the
   patched glyphs. */
@font-face {
  font-family: 'Space Grotesk Patched';
  src: url('fonts/SpaceGroteskPatched-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk Patched';
  src: url('fonts/SpaceGroteskPatched-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* Pixelify Sans with the 2 and 5 redrawn (its originals read as S shapes).
   Only 400 and 700 exist; 500 maps to regular, 600 to bold. */
@font-face {
  font-family: 'Pixelify Patched';
  src: url('fonts/PixelifyPatched-Regular.ttf') format('truetype');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Pixelify Patched';
  src: url('fonts/PixelifyPatched-Bold.ttf') format('truetype');
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}
:root {
  --bg-primary:   #160b33;
  --bg-deeper:    #0e0622;
  --bg-band:      #130929;   /* alternating band ground - a shallow step from --bg-primary */
  --accent:       #5083ff;
  --accent-light: #7fa5ff;
  --text-heading: #e6f1fb;
  --text-body:    #b6a9e8;
  --text-muted:   #8a7fd0;
  --border:       #4a3585;
  --font-pixel:   'Pixelify Patched', ui-monospace, monospace;
  /* Card counter squares. Sized in DEVICE pixels, divided by the page scale
     the same way --rule is: 12 / 1.1 * 1.1 = 12 exactly. A plain 11px would
     render at 12.1 device px, and squares next to each other round that
     differently — some 12, some 13 — which is visibly uneven at this size.
     Change the numerator and every dependent value follows: the counter
     widths, the 2x2's row gap and both heading offsets. Space Grotesk's
     ascent/descent are 984/292 per 1000em and its cap height is 0.70em. */
  --pip: calc(12px / var(--page-scale));
  --pip-gap: calc(3px / var(--page-scale));
  /* Card heading leading, also in device pixels so line pitch stays whole.
     15 = --pip 12 + 3, which makes the 2x2's row gap (--card-lh - --pip)
     equal --pip-gap: even spacing in both directions, and a second line
     that lands on the second row of squares. The baseline offset inside the
     line box follows: half-leading + ascent = (lh - 19.14) / 2 + 14.76. */
  --card-lh: calc(15px / var(--page-scale));
  --pip-baseline: calc((var(--card-lh) - 19.14px) / 2 + 14.76px);
  /* The row counter sits 6px down, so its squares end at 6px + --pip; the
     line box goes that far down minus the baseline offset, which lands the
     text bottom on the squares' bottom edge. Raise to move the text down. */
  --card-heading-nudge: calc(6px + var(--pip) - var(--pip-baseline));
  /* Whole-page scale. 1 = as designed; 1.1 renders 10% larger at 100% browser zoom. */
  --page-scale: 1.1;
  /* Hairline: divides out the page scale so every rule lands on a whole
     device pixel (2 / 1.1 * 1.1 = 2). Without this, 2px borders round to
     2.2px and adjacent edges — nav against hero, section against section —
     stop meeting cleanly. */
  --rule: calc(2px / var(--page-scale));
  /* Same trick at one device pixel, for hairlines that must not round up. */
  --hair: calc(1px / var(--page-scale));
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body { zoom: var(--page-scale); }
/* Below ~1100px the layout is already tight, so let it return to true size. */
/* At true size the device pixel is the CSS pixel, so the scale division
   above is undone here rather than left to produce fractions. These have to
   land on :root, not body: --pip-baseline and --card-heading-nudge are
   declared there and resolve against :root's values, so overriding lower
   down would leave the derived offsets computing from the scaled numbers. */
@media (max-width: 1100px) {
  :root {
    --pip: 12px; --pip-gap: 3px; --card-lh: 15px; --rule: 2px; --hair: 1px;
    /* Unscaled, Chrome rounds the font's ascent and descent to whole pixels,
       which puts the baseline 12px below the line-box top rather than the
       12.69px the metrics predict. Measured, so the offsets stay exact. */
    --pip-baseline: 12px;
  }
  body { zoom: 1; }
}

html { background-color: var(--bg-primary); color: var(--text-body); scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: 'Space Grotesk Patched', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0.01em;
  background-color: var(--bg-primary);
  /* Fallback only — reserveNav() measures the real bar on load and resize. */
  padding-top: 68px;
  position: relative;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Space Grotesk Patched', sans-serif;
  font-weight: 700;
  color: var(--text-heading);
  line-height: 1.2;
}

p { color: var(--text-body); }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--text-heading); }

.container {
  max-width: 1024px;
  margin: 0 auto;
  padding: 0 24px;
}

.section-label {
  font-family: var(--font-pixel);
  font-weight: 500;
  font-size: 19px;
  /* Pinned: the section-opening label is an h2, and the global heading
     rule would otherwise drop it to line-height 1.2. */
  line-height: 1.7;
  color: var(--accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 16px;
  position: relative;
  padding-right: 16px;
  padding-bottom: 8px;
  z-index: 1;
}
.section-label--plain::before,
.section-label--plain::after { display: none; }

#hero .section-label { font-size: 21px; white-space: nowrap; }


/* Underline beam: 2px rule fading right, with a low glow beneath */
.section-label::before {
  content: '';
  position: absolute;
  left: 0; right: -2px; bottom: 0;
  height: 2px;
  background: linear-gradient(to right,
    var(--accent-light) 0%,
    var(--accent) 55%,
    transparent 100%);
  z-index: -1;
}
.section-label::after {
  content: '';
  position: absolute;
  left: 0; right: -60px; bottom: -6px;
  height: 16px;
  background: linear-gradient(to right,
    rgba(80,131,255,0.30) 0%,
    rgba(80,131,255,0.35) 15%,
    rgba(80,131,255,0.12) 55%,
    transparent 100%);
  filter: blur(7px);
  z-index: -1;
}
/* Centered variant ("Get in touch") - beam symmetric about the label.
   The 16px right padding the left-aligned labels carry would offset the
   box centre from the text centre, so it comes off here. */
.section-label.section-label--symmetric { padding-right: 0; }
.section-label.section-label--symmetric::before {
  background: linear-gradient(to right,
    transparent 0%,
    var(--accent) 25%,
    var(--accent-light) 50%,
    var(--accent) 75%,
    transparent 100%);
}
.section-label.section-label--symmetric::after {
  left: -60px; right: -60px;
  background: linear-gradient(to right,
    transparent 0%,
    rgba(80,131,255,0.3) 30%,
    rgba(80,131,255,0.3) 70%,
    transparent 100%);
}



/* ---- Nav ---- */
#nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 14px;
}
#nav-toggle {
  display: none;
  background: transparent;
  border: var(--rule) solid var(--border);
  padding: 8px 9px;
  cursor: pointer;
  line-height: 0;
}
#nav-toggle:hover { border-color: var(--accent); }
.nav-bars { display: flex; flex-direction: column; gap: 4px; }
.nav-bars i { display: block; width: 18px; height: 2px; background: var(--text-body); }
#nav-toggle[aria-expanded="true"] .nav-bars i { background: var(--accent); }
@media (max-width: 767px) {
  #nav-toggle { display: block; }
  #nav-links {
    position: absolute;
    top: 100%;
    left: -2px;
    right: -2px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg-deeper);
    border: var(--rule) solid var(--border);
    border-top: none;
    padding: 8px 24px 20px;
    font-size: 16px;
    display: none;
  }
  html.nav-open #nav-links { display: flex; }
  #nav-links .nav-link { padding: 14px 0; border-bottom: var(--rule) solid var(--border); }
  #nav-cta { margin-top: 16px; text-align: center; }
}


/* The card's frame lives on a layer behind the text. On hover that layer
   expands rather than the card being scaled — a transform: scale() would
   resample the already-rendered glyphs and counters, which is what made
   them go soft for the length of the animation. */
.card {
  position: relative;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 20px 22px 24px;
  transition: transform 0.2s ease;
}
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--bg-deeper);
  border: var(--rule) solid var(--border);
  transition: inset 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.card > * { position: relative; z-index: 1; }
.x-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: var(--rule) solid var(--border);
  color: var(--text-muted);
  transition: border-color 0.2s, color 0.2s;
}
.x-btn:hover { border-color: var(--accent); color: var(--accent); }
.x-link { display: flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 14px; transition: color 0.2s; }
.x-link:hover { color: var(--accent); }
.x-link:hover .x-btn { border-color: var(--accent); color: var(--accent); }
.to-top { transition: opacity 0.2s ease; }
.to-top:hover { opacity: 0.72; }
/* The header CTA is deliberately shorter than the 42px page buttons: it sits in
   a 60px bar, where the full height reads heavy. 24.77px line box +
   2 x 5.3px padding + 2 x 1.8px border = 39px. */
#nav-cta { padding-top: 5.3px; padding-bottom: 5.3px; }
.nav-link { font-family: var(--font-pixel); font-size: 15px; color: var(--text-body); text-decoration: none; transition: color 0.2s; }
.nav-link:hover { color: var(--text-heading); }

.card:hover,
.card.fade-in.visible:hover {
  transform: translateY(-4px);
  position: relative;
  z-index: 1;
}
.card:hover::before,
.card.fade-in.visible:hover::before {
  /* Top expands further than the bottom, so once the 4px lift is added the
     bottom edge still rises — the card reads as lifting, not just growing. */
  inset: -6px -4px -1px;
  border-color: var(--accent);
  box-shadow: 0 12px 32px rgba(80, 131, 255, 0.22);
}
@media (prefers-reduced-motion: reduce) {
  .card, .card::before { transition: none; }
}

.js .fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}
/* Entry done: hand the transform back to the hover timing so the lift and
   the frame start together. */
.card.fade-in.visible {
  transition: opacity 0.3s ease, transform 0.2s ease;
}

/* Counter: a 2x2 grid that fills one block per step, closing on step four. */
.card-head { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 10px; }
/* Counters are DOM boxes, not one SVG: identical elements round identically
   under zoom, so the squares and the gaps between them stay even. */
.step-counter, .row-counter {
  display: grid;
  gap: var(--pip-gap);
  flex-shrink: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* The 2x2's row gap is whatever makes its row pitch equal the heading's
   leading — that is what puts a two-line heading's second line on the
   second row of squares, at any --pip or --card-lh. */
.step-counter {
  grid-template-columns: repeat(2, var(--pip));
  width: calc(2 * var(--pip) + var(--pip-gap));
  row-gap: calc(var(--card-lh) - var(--pip));
}
.step-counter > * , .row-counter > * { width: var(--pip); height: var(--pip); box-sizing: border-box; }
.pip-on  { background: var(--accent-light); }
.pip-off { border: var(--rule) solid var(--border); }

/* Used where the cards are a set, not a sequence. */
.row-counter {
  grid-template-columns: repeat(3, var(--pip));
  width: calc(3 * var(--pip) + 2 * var(--pip-gap));
  height: var(--pip);
  margin-top: 6px;
}
.card-head .card-heading { margin-top: var(--card-heading-nudge); font-size: 15px; line-height: var(--card-lh); letter-spacing: 0.02em; }

/* Page-wide star field: one fixed layer behind every section. Each band is
   a single seeded SVG tile repeated vertically, so the field is continuous
   down the page instead of restarting at every section. */
#sky {
  position: fixed;
  inset: 0;
  pointer-events: none;
  /* Above the section grounds, vignettes and tints; below all content, so a
     star keeps the same brightness whichever section it happens to cross. */
  z-index: 1;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.58) 26%, #000 62%);
  mask-image: linear-gradient(to right, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.58) 26%, #000 62%);
}
.sky-band {
  position: absolute;
  left: 0; right: 0;
  top: -1800px; bottom: -1800px;
  background-repeat: repeat;
  background-position: center top;
  will-change: transform;
}
.sky-dust   { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221600%22%20height%3D%221100%22%20viewBox%3D%220%200%201600%201100%22%3E%3Crect%20x%3D%22955.3%22%20y%3D%22329.2%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23efe7ff%22%20opacity%3D%220.99%22%2F%3E%3Crect%20x%3D%22846.7%22%20y%3D%22956.9%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%237fa5ff%22%20opacity%3D%220.40%22%2F%3E%3Crect%20x%3D%22335.4%22%20y%3D%22212.7%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%237fa5ff%22%20opacity%3D%220.39%22%2F%3E%3Crect%20x%3D%2248.4%22%20y%3D%2279.2%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%23c9a9e8%22%20opacity%3D%220.95%22%2F%3E%3Crect%20x%3D%221186%22%20y%3D%2270.1%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23efe7ff%22%20opacity%3D%220.67%22%2F%3E%3Crect%20x%3D%221427.7%22%20y%3D%2275.8%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23b6a9e8%22%20opacity%3D%220.45%22%2F%3E%3Crect%20x%3D%221146.4%22%20y%3D%22812.7%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%23b6a9e8%22%20opacity%3D%220.88%22%2F%3E%3Crect%20x%3D%221188%22%20y%3D%2239.8%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23b6a9e8%22%20opacity%3D%220.45%22%2F%3E%3Crect%20x%3D%22612.9%22%20y%3D%22329.4%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%23b6a9e8%22%20opacity%3D%220.55%22%2F%3E%3Crect%20x%3D%22892.9%22%20y%3D%22220.6%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%238a7fd0%22%20opacity%3D%220.72%22%2F%3E%3Crect%20x%3D%22477.3%22%20y%3D%22924.3%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23efe7ff%22%20opacity%3D%220.58%22%2F%3E%3Crect%20x%3D%22939%22%20y%3D%22439.4%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23efe7ff%22%20opacity%3D%220.50%22%2F%3E%3Crect%20x%3D%22946.1%22%20y%3D%22577.6%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%238a7fd0%22%20opacity%3D%220.54%22%2F%3E%3Crect%20x%3D%22127.4%22%20y%3D%22848.3%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%23c9a9e8%22%20opacity%3D%220.43%22%2F%3E%3Crect%20x%3D%22966.2%22%20y%3D%22679.3%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%237fa5ff%22%20opacity%3D%220.51%22%2F%3E%3Crect%20x%3D%22629.6%22%20y%3D%22694.7%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23c9a9e8%22%20opacity%3D%220.50%22%2F%3E%3Crect%20x%3D%22987.7%22%20y%3D%220.4%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%23b6a9e8%22%20opacity%3D%220.86%22%2F%3E%3Crect%20x%3D%22691.4%22%20y%3D%22403.9%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23efe7ff%22%20opacity%3D%220.52%22%2F%3E%3Crect%20x%3D%221349.6%22%20y%3D%22311%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%23efe7ff%22%20opacity%3D%220.39%22%2F%3E%3Crect%20x%3D%221099.4%22%20y%3D%22493.3%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23c9a9e8%22%20opacity%3D%220.89%22%2F%3E%3Crect%20x%3D%22354.3%22%20y%3D%22500.6%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23b6a9e8%22%20opacity%3D%220.59%22%2F%3E%3Crect%20x%3D%22673.8%22%20y%3D%22119.2%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%237fa5ff%22%20opacity%3D%220.53%22%2F%3E%3Crect%20x%3D%22948.6%22%20y%3D%22988.6%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23c9a9e8%22%20opacity%3D%220.98%22%2F%3E%3Crect%20x%3D%22362.8%22%20y%3D%22545%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%238a7fd0%22%20opacity%3D%220.86%22%2F%3E%3Crect%20x%3D%221510.4%22%20y%3D%22856.6%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23efe7ff%22%20opacity%3D%220.94%22%2F%3E%3Crect%20x%3D%22934.9%22%20y%3D%22977.5%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%238a7fd0%22%20opacity%3D%220.57%22%2F%3E%3Crect%20x%3D%221437.8%22%20y%3D%22961.6%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23c9a9e8%22%20opacity%3D%220.51%22%2F%3E%3Crect%20x%3D%2278.9%22%20y%3D%22149.9%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23c9a9e8%22%20opacity%3D%220.88%22%2F%3E%3Crect%20x%3D%22883.9%22%20y%3D%22314%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23c9a9e8%22%20opacity%3D%220.74%22%2F%3E%3Crect%20x%3D%221467.6%22%20y%3D%221003%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23c9a9e8%22%20opacity%3D%220.79%22%2F%3E%3Crect%20x%3D%221317.4%22%20y%3D%22367.9%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23b6a9e8%22%20opacity%3D%220.80%22%2F%3E%3Crect%20x%3D%221351.5%22%20y%3D%22390.7%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23b6a9e8%22%20opacity%3D%220.75%22%2F%3E%3Crect%20x%3D%22889.5%22%20y%3D%221025.1%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%238a7fd0%22%20opacity%3D%220.99%22%2F%3E%3Crect%20x%3D%22935.3%22%20y%3D%22715.3%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%23c9a9e8%22%20opacity%3D%220.75%22%2F%3E%3Crect%20x%3D%22936.9%22%20y%3D%2256.5%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%237fa5ff%22%20opacity%3D%220.66%22%2F%3E%3Crect%20x%3D%221321%22%20y%3D%22831.4%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23c9a9e8%22%20opacity%3D%220.93%22%2F%3E%3Crect%20x%3D%22155.7%22%20y%3D%22240.9%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%23efe7ff%22%20opacity%3D%220.85%22%2F%3E%3Crect%20x%3D%22925.1%22%20y%3D%2214%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%238a7fd0%22%20opacity%3D%220.88%22%2F%3E%3Crect%20x%3D%22293.1%22%20y%3D%22242.3%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23c9a9e8%22%20opacity%3D%220.74%22%2F%3E%3Crect%20x%3D%22498.3%22%20y%3D%22723.8%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23efe7ff%22%20opacity%3D%220.91%22%2F%3E%3Crect%20x%3D%221584.2%22%20y%3D%22153.9%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23b6a9e8%22%20opacity%3D%220.41%22%2F%3E%3Crect%20x%3D%22699.8%22%20y%3D%22746.5%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23efe7ff%22%20opacity%3D%220.39%22%2F%3E%3Crect%20x%3D%22192.5%22%20y%3D%22542.2%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23efe7ff%22%20opacity%3D%220.99%22%2F%3E%3Crect%20x%3D%22244.4%22%20y%3D%22233.8%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23b6a9e8%22%20opacity%3D%220.65%22%2F%3E%3Crect%20x%3D%221568.4%22%20y%3D%22781%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23efe7ff%22%20opacity%3D%220.45%22%2F%3E%3Crect%20x%3D%221269.4%22%20y%3D%22826%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%238a7fd0%22%20opacity%3D%220.41%22%2F%3E%3C%2Fsvg%3E"); background-size: 1600px 1100px; animation: dustFade 11s cubic-bezier(.4,0,.6,1) infinite; }
.sky-dust-b { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221600%22%20height%3D%221700%22%20viewBox%3D%220%200%201600%201700%22%3E%3Crect%20x%3D%221487.7%22%20y%3D%221348.7%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%23c9a9e8%22%20opacity%3D%220.64%22%2F%3E%3Crect%20x%3D%22827.2%22%20y%3D%22447.9%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%237fa5ff%22%20opacity%3D%220.56%22%2F%3E%3Crect%20x%3D%22481%22%20y%3D%22656.3%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23c9a9e8%22%20opacity%3D%220.98%22%2F%3E%3Crect%20x%3D%225.2%22%20y%3D%22334.2%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23efe7ff%22%20opacity%3D%220.84%22%2F%3E%3Crect%20x%3D%22519.7%22%20y%3D%2272.5%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%238a7fd0%22%20opacity%3D%220.45%22%2F%3E%3Crect%20x%3D%2215.5%22%20y%3D%22991.9%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23b6a9e8%22%20opacity%3D%220.69%22%2F%3E%3Crect%20x%3D%22714.4%22%20y%3D%22261.7%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23c9a9e8%22%20opacity%3D%220.37%22%2F%3E%3Crect%20x%3D%22447.5%22%20y%3D%221132.3%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23c9a9e8%22%20opacity%3D%220.78%22%2F%3E%3Crect%20x%3D%22127.9%22%20y%3D%22383.4%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23b6a9e8%22%20opacity%3D%220.39%22%2F%3E%3Crect%20x%3D%22914.5%22%20y%3D%22631.8%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%23c9a9e8%22%20opacity%3D%220.77%22%2F%3E%3Crect%20x%3D%221345.2%22%20y%3D%22244%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%23c9a9e8%22%20opacity%3D%220.85%22%2F%3E%3Crect%20x%3D%2220.5%22%20y%3D%22825.9%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23b6a9e8%22%20opacity%3D%220.91%22%2F%3E%3Crect%20x%3D%22563.8%22%20y%3D%221588.6%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23efe7ff%22%20opacity%3D%220.54%22%2F%3E%3Crect%20x%3D%221245.9%22%20y%3D%221057.4%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23efe7ff%22%20opacity%3D%220.94%22%2F%3E%3Crect%20x%3D%221274.5%22%20y%3D%221167.1%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%238a7fd0%22%20opacity%3D%220.69%22%2F%3E%3Crect%20x%3D%221530.6%22%20y%3D%22792.9%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23efe7ff%22%20opacity%3D%220.98%22%2F%3E%3Crect%20x%3D%22415.3%22%20y%3D%22651.3%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23efe7ff%22%20opacity%3D%220.62%22%2F%3E%3Crect%20x%3D%22434.4%22%20y%3D%22532.5%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23c9a9e8%22%20opacity%3D%220.64%22%2F%3E%3Crect%20x%3D%221311.7%22%20y%3D%22998.6%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%238a7fd0%22%20opacity%3D%220.54%22%2F%3E%3Crect%20x%3D%221527.9%22%20y%3D%221466.2%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23c9a9e8%22%20opacity%3D%220.57%22%2F%3E%3Crect%20x%3D%22371%22%20y%3D%22919.7%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%23b6a9e8%22%20opacity%3D%220.48%22%2F%3E%3Crect%20x%3D%22502.5%22%20y%3D%221429.7%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23b6a9e8%22%20opacity%3D%220.49%22%2F%3E%3Crect%20x%3D%2269.9%22%20y%3D%22506.1%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%238a7fd0%22%20opacity%3D%220.99%22%2F%3E%3Crect%20x%3D%221515.8%22%20y%3D%221368.8%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%23b6a9e8%22%20opacity%3D%220.46%22%2F%3E%3Crect%20x%3D%22726.7%22%20y%3D%221627.1%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%238a7fd0%22%20opacity%3D%220.91%22%2F%3E%3Crect%20x%3D%221319.8%22%20y%3D%22924.2%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%237fa5ff%22%20opacity%3D%220.57%22%2F%3E%3Crect%20x%3D%221156%22%20y%3D%221526.2%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%238a7fd0%22%20opacity%3D%220.47%22%2F%3E%3Crect%20x%3D%22995%22%20y%3D%2243.4%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%237fa5ff%22%20opacity%3D%220.99%22%2F%3E%3Crect%20x%3D%22954.9%22%20y%3D%22850.2%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23b6a9e8%22%20opacity%3D%220.95%22%2F%3E%3Crect%20x%3D%2297.5%22%20y%3D%22358.8%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23c9a9e8%22%20opacity%3D%220.95%22%2F%3E%3Crect%20x%3D%221456.8%22%20y%3D%22359.8%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%238a7fd0%22%20opacity%3D%220.58%22%2F%3E%3Crect%20x%3D%22205%22%20y%3D%221343.5%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23c9a9e8%22%20opacity%3D%220.40%22%2F%3E%3Crect%20x%3D%221418%22%20y%3D%221310.9%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%238a7fd0%22%20opacity%3D%220.66%22%2F%3E%3Crect%20x%3D%221070.1%22%20y%3D%22907.8%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%23efe7ff%22%20opacity%3D%220.76%22%2F%3E%3C%2Fsvg%3E"); background-size: 1600px 1700px; opacity: 0.72; animation: dustLift 19s cubic-bezier(.4,0,.6,1) infinite; }
.sky-glow   { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221600%22%20height%3D%221100%22%20viewBox%3D%220%200%201600%201100%22%3E%3Crect%20x%3D%22955.3%22%20y%3D%22329.2%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23efe7ff%22%20opacity%3D%220.99%22%2F%3E%3Crect%20x%3D%22846.7%22%20y%3D%22956.9%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%237fa5ff%22%20opacity%3D%220.40%22%2F%3E%3Crect%20x%3D%22335.4%22%20y%3D%22212.7%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%237fa5ff%22%20opacity%3D%220.39%22%2F%3E%3Crect%20x%3D%2248.4%22%20y%3D%2279.2%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%23c9a9e8%22%20opacity%3D%220.95%22%2F%3E%3Crect%20x%3D%221186%22%20y%3D%2270.1%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23efe7ff%22%20opacity%3D%220.67%22%2F%3E%3Crect%20x%3D%221427.7%22%20y%3D%2275.8%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23b6a9e8%22%20opacity%3D%220.45%22%2F%3E%3Crect%20x%3D%221146.4%22%20y%3D%22812.7%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%23b6a9e8%22%20opacity%3D%220.88%22%2F%3E%3Crect%20x%3D%221188%22%20y%3D%2239.8%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23b6a9e8%22%20opacity%3D%220.45%22%2F%3E%3Crect%20x%3D%22612.9%22%20y%3D%22329.4%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%23b6a9e8%22%20opacity%3D%220.55%22%2F%3E%3Crect%20x%3D%22892.9%22%20y%3D%22220.6%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%238a7fd0%22%20opacity%3D%220.72%22%2F%3E%3Crect%20x%3D%22477.3%22%20y%3D%22924.3%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23efe7ff%22%20opacity%3D%220.58%22%2F%3E%3Crect%20x%3D%22939%22%20y%3D%22439.4%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23efe7ff%22%20opacity%3D%220.50%22%2F%3E%3Crect%20x%3D%22946.1%22%20y%3D%22577.6%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%238a7fd0%22%20opacity%3D%220.54%22%2F%3E%3Crect%20x%3D%22127.4%22%20y%3D%22848.3%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%23c9a9e8%22%20opacity%3D%220.43%22%2F%3E%3Crect%20x%3D%22966.2%22%20y%3D%22679.3%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%237fa5ff%22%20opacity%3D%220.51%22%2F%3E%3Crect%20x%3D%22629.6%22%20y%3D%22694.7%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23c9a9e8%22%20opacity%3D%220.50%22%2F%3E%3Crect%20x%3D%22987.7%22%20y%3D%220.4%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%23b6a9e8%22%20opacity%3D%220.86%22%2F%3E%3Crect%20x%3D%22691.4%22%20y%3D%22403.9%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23efe7ff%22%20opacity%3D%220.52%22%2F%3E%3Crect%20x%3D%221349.6%22%20y%3D%22311%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%23efe7ff%22%20opacity%3D%220.39%22%2F%3E%3Crect%20x%3D%221099.4%22%20y%3D%22493.3%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23c9a9e8%22%20opacity%3D%220.89%22%2F%3E%3Crect%20x%3D%22354.3%22%20y%3D%22500.6%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23b6a9e8%22%20opacity%3D%220.59%22%2F%3E%3Crect%20x%3D%22673.8%22%20y%3D%22119.2%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%237fa5ff%22%20opacity%3D%220.53%22%2F%3E%3Crect%20x%3D%22948.6%22%20y%3D%22988.6%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23c9a9e8%22%20opacity%3D%220.98%22%2F%3E%3Crect%20x%3D%22362.8%22%20y%3D%22545%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%238a7fd0%22%20opacity%3D%220.86%22%2F%3E%3Crect%20x%3D%221510.4%22%20y%3D%22856.6%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23efe7ff%22%20opacity%3D%220.94%22%2F%3E%3Crect%20x%3D%22934.9%22%20y%3D%22977.5%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%238a7fd0%22%20opacity%3D%220.57%22%2F%3E%3Crect%20x%3D%221437.8%22%20y%3D%22961.6%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23c9a9e8%22%20opacity%3D%220.51%22%2F%3E%3Crect%20x%3D%2278.9%22%20y%3D%22149.9%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23c9a9e8%22%20opacity%3D%220.88%22%2F%3E%3Crect%20x%3D%22883.9%22%20y%3D%22314%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23c9a9e8%22%20opacity%3D%220.74%22%2F%3E%3Crect%20x%3D%221467.6%22%20y%3D%221003%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23c9a9e8%22%20opacity%3D%220.79%22%2F%3E%3Crect%20x%3D%221317.4%22%20y%3D%22367.9%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23b6a9e8%22%20opacity%3D%220.80%22%2F%3E%3Crect%20x%3D%221351.5%22%20y%3D%22390.7%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23b6a9e8%22%20opacity%3D%220.75%22%2F%3E%3Crect%20x%3D%22889.5%22%20y%3D%221025.1%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%238a7fd0%22%20opacity%3D%220.99%22%2F%3E%3Crect%20x%3D%22935.3%22%20y%3D%22715.3%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%23c9a9e8%22%20opacity%3D%220.75%22%2F%3E%3Crect%20x%3D%22936.9%22%20y%3D%2256.5%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%237fa5ff%22%20opacity%3D%220.66%22%2F%3E%3Crect%20x%3D%221321%22%20y%3D%22831.4%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23c9a9e8%22%20opacity%3D%220.93%22%2F%3E%3Crect%20x%3D%22155.7%22%20y%3D%22240.9%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%23efe7ff%22%20opacity%3D%220.85%22%2F%3E%3Crect%20x%3D%22925.1%22%20y%3D%2214%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%238a7fd0%22%20opacity%3D%220.88%22%2F%3E%3Crect%20x%3D%22293.1%22%20y%3D%22242.3%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23c9a9e8%22%20opacity%3D%220.74%22%2F%3E%3Crect%20x%3D%22498.3%22%20y%3D%22723.8%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23efe7ff%22%20opacity%3D%220.91%22%2F%3E%3Crect%20x%3D%221584.2%22%20y%3D%22153.9%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23b6a9e8%22%20opacity%3D%220.41%22%2F%3E%3Crect%20x%3D%22699.8%22%20y%3D%22746.5%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23efe7ff%22%20opacity%3D%220.39%22%2F%3E%3Crect%20x%3D%22192.5%22%20y%3D%22542.2%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23efe7ff%22%20opacity%3D%220.99%22%2F%3E%3Crect%20x%3D%22244.4%22%20y%3D%22233.8%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23b6a9e8%22%20opacity%3D%220.65%22%2F%3E%3Crect%20x%3D%221568.4%22%20y%3D%22781%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23efe7ff%22%20opacity%3D%220.45%22%2F%3E%3Crect%20x%3D%221269.4%22%20y%3D%22826%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%238a7fd0%22%20opacity%3D%220.41%22%2F%3E%3C%2Fsvg%3E"); background-size: 1600px 1100px; filter: blur(3px); animation: dustLift 17s cubic-bezier(.4,0,.6,1) infinite; }
.sky-dots   { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221600%22%20height%3D%221400%22%20viewBox%3D%220%200%201600%201400%22%3E%3Ccircle%20cx%3D%22375.7%22%20cy%3D%22344.8%22%20r%3D%221.1%22%20fill%3D%22%23efe7ff%22%20opacity%3D%220.78%22%2F%3E%3Ccircle%20cx%3D%22864.4%22%20cy%3D%22975.9%22%20r%3D%221.1%22%20fill%3D%22%23b6a9e8%22%20opacity%3D%220.65%22%2F%3E%3Ccircle%20cx%3D%22352.8%22%20cy%3D%22215.7%22%20r%3D%221.7%22%20fill%3D%22%237fa5ff%22%20opacity%3D%220.36%22%2F%3E%3Ccircle%20cx%3D%2257.3%22%20cy%3D%221034.3%22%20r%3D%220.8%22%20fill%3D%22%238a7fd0%22%20opacity%3D%220.77%22%2F%3E%3Ccircle%20cx%3D%2221.2%22%20cy%3D%22465.8%22%20r%3D%221.6%22%20fill%3D%22%23efe7ff%22%20opacity%3D%220.77%22%2F%3E%3Ccircle%20cx%3D%22644.3%22%20cy%3D%22370.3%22%20r%3D%221.5%22%20fill%3D%22%23c9a9e8%22%20opacity%3D%220.36%22%2F%3E%3Ccircle%20cx%3D%221088.3%22%20cy%3D%2277%22%20r%3D%221.7%22%20fill%3D%22%23efe7ff%22%20opacity%3D%220.87%22%2F%3E%3Ccircle%20cx%3D%22175.8%22%20cy%3D%22330.8%22%20r%3D%221.6%22%20fill%3D%22%237fa5ff%22%20opacity%3D%220.75%22%2F%3E%3Ccircle%20cx%3D%221.8%22%20cy%3D%22421.7%22%20r%3D%220.9%22%20fill%3D%22%23c9a9e8%22%20opacity%3D%220.49%22%2F%3E%3Ccircle%20cx%3D%221161.3%22%20cy%3D%2216%22%20r%3D%221.2%22%20fill%3D%22%238a7fd0%22%20opacity%3D%220.53%22%2F%3E%3Ccircle%20cx%3D%221117%22%20cy%3D%22302.6%22%20r%3D%220.8%22%20fill%3D%22%23c9a9e8%22%20opacity%3D%220.43%22%2F%3E%3Ccircle%20cx%3D%22444.7%22%20cy%3D%221286.5%22%20r%3D%221.1%22%20fill%3D%22%23c9a9e8%22%20opacity%3D%220.70%22%2F%3E%3Ccircle%20cx%3D%22321.4%22%20cy%3D%221010.4%22%20r%3D%221.1%22%20fill%3D%22%237fa5ff%22%20opacity%3D%220.94%22%2F%3E%3Ccircle%20cx%3D%221134.3%22%20cy%3D%221035.7%22%20r%3D%221.7%22%20fill%3D%22%23efe7ff%22%20opacity%3D%220.97%22%2F%3E%3Ccircle%20cx%3D%22977%22%20cy%3D%22862.1%22%20r%3D%221.2%22%20fill%3D%22%23b6a9e8%22%20opacity%3D%220.90%22%2F%3E%3Ccircle%20cx%3D%22380.2%22%20cy%3D%22250.7%22%20r%3D%221.7%22%20fill%3D%22%237fa5ff%22%20opacity%3D%220.66%22%2F%3E%3Ccircle%20cx%3D%22806.3%22%20cy%3D%22677.4%22%20r%3D%221.6%22%20fill%3D%22%23c9a9e8%22%20opacity%3D%220.43%22%2F%3E%3Ccircle%20cx%3D%221596.1%22%20cy%3D%22379%22%20r%3D%221.3%22%20fill%3D%22%23b6a9e8%22%20opacity%3D%220.63%22%2F%3E%3Ccircle%20cx%3D%22169.2%22%20cy%3D%22361.5%22%20r%3D%221.4%22%20fill%3D%22%238a7fd0%22%20opacity%3D%220.64%22%2F%3E%3Ccircle%20cx%3D%22467.4%22%20cy%3D%221004.5%22%20r%3D%221.0%22%20fill%3D%22%23c9a9e8%22%20opacity%3D%220.62%22%2F%3E%3Ccircle%20cx%3D%221104.7%22%20cy%3D%221213.2%22%20r%3D%221.4%22%20fill%3D%22%238a7fd0%22%20opacity%3D%220.59%22%2F%3E%3Ccircle%20cx%3D%22654.3%22%20cy%3D%22229.4%22%20r%3D%220.8%22%20fill%3D%22%23efe7ff%22%20opacity%3D%220.36%22%2F%3E%3Ccircle%20cx%3D%221379.9%22%20cy%3D%22372.8%22%20r%3D%221.0%22%20fill%3D%22%238a7fd0%22%20opacity%3D%220.90%22%2F%3E%3Ccircle%20cx%3D%22156.1%22%20cy%3D%221193.9%22%20r%3D%221.0%22%20fill%3D%22%237fa5ff%22%20opacity%3D%220.36%22%2F%3E%3Ccircle%20cx%3D%22900.8%22%20cy%3D%22836.7%22%20r%3D%221.0%22%20fill%3D%22%238a7fd0%22%20opacity%3D%220.82%22%2F%3E%3Ccircle%20cx%3D%22238.4%22%20cy%3D%22935%22%20r%3D%221.3%22%20fill%3D%22%238a7fd0%22%20opacity%3D%220.86%22%2F%3E%3Ccircle%20cx%3D%221331.5%22%20cy%3D%2283.1%22%20r%3D%220.9%22%20fill%3D%22%23efe7ff%22%20opacity%3D%220.79%22%2F%3E%3Ccircle%20cx%3D%22281.2%22%20cy%3D%22338.2%22%20r%3D%221.3%22%20fill%3D%22%23b6a9e8%22%20opacity%3D%220.81%22%2F%3E%3Ccircle%20cx%3D%22824.5%22%20cy%3D%22232.2%22%20r%3D%220.9%22%20fill%3D%22%23b6a9e8%22%20opacity%3D%220.47%22%2F%3E%3Ccircle%20cx%3D%221424.3%22%20cy%3D%22147.3%22%20r%3D%220.8%22%20fill%3D%22%23c9a9e8%22%20opacity%3D%220.64%22%2F%3E%3Ccircle%20cx%3D%221535.3%22%20cy%3D%22247.7%22%20r%3D%221.4%22%20fill%3D%22%237fa5ff%22%20opacity%3D%220.89%22%2F%3E%3Ccircle%20cx%3D%221305.5%22%20cy%3D%221380.5%22%20r%3D%220.9%22%20fill%3D%22%237fa5ff%22%20opacity%3D%220.93%22%2F%3E%3Ccircle%20cx%3D%22164.9%22%20cy%3D%221361.1%22%20r%3D%220.9%22%20fill%3D%22%23efe7ff%22%20opacity%3D%220.53%22%2F%3E%3Ccircle%20cx%3D%22594.6%22%20cy%3D%221188.7%22%20r%3D%221.2%22%20fill%3D%22%23efe7ff%22%20opacity%3D%220.49%22%2F%3E%3Ccircle%20cx%3D%221495.2%22%20cy%3D%22292.8%22%20r%3D%221.4%22%20fill%3D%22%238a7fd0%22%20opacity%3D%220.79%22%2F%3E%3Ccircle%20cx%3D%221318.2%22%20cy%3D%22368.3%22%20r%3D%221.5%22%20fill%3D%22%237fa5ff%22%20opacity%3D%220.64%22%2F%3E%3Ccircle%20cx%3D%22532.9%22%20cy%3D%22199.2%22%20r%3D%221.3%22%20fill%3D%22%23b6a9e8%22%20opacity%3D%220.70%22%2F%3E%3Ccircle%20cx%3D%22375.8%22%20cy%3D%22796.1%22%20r%3D%221.5%22%20fill%3D%22%23c9a9e8%22%20opacity%3D%220.61%22%2F%3E%3Ccircle%20cx%3D%221499%22%20cy%3D%22576.1%22%20r%3D%220.9%22%20fill%3D%22%23b6a9e8%22%20opacity%3D%220.36%22%2F%3E%3Ccircle%20cx%3D%22649.3%22%20cy%3D%221253.5%22%20r%3D%221.0%22%20fill%3D%22%23efe7ff%22%20opacity%3D%220.76%22%2F%3E%3Ccircle%20cx%3D%22864%22%20cy%3D%22419.1%22%20r%3D%221.6%22%20fill%3D%22%238a7fd0%22%20opacity%3D%220.73%22%2F%3E%3Ccircle%20cx%3D%22239.8%22%20cy%3D%2220.6%22%20r%3D%221.3%22%20fill%3D%22%237fa5ff%22%20opacity%3D%220.93%22%2F%3E%3Ccircle%20cx%3D%2239%22%20cy%3D%221275.9%22%20r%3D%221.4%22%20fill%3D%22%23c9a9e8%22%20opacity%3D%220.93%22%2F%3E%3Ccircle%20cx%3D%22824.7%22%20cy%3D%221121.5%22%20r%3D%221.0%22%20fill%3D%22%237fa5ff%22%20opacity%3D%220.37%22%2F%3E%3Ccircle%20cx%3D%221598.2%22%20cy%3D%22251.7%22%20r%3D%220.8%22%20fill%3D%22%237fa5ff%22%20opacity%3D%220.89%22%2F%3E%3Ccircle%20cx%3D%22268.4%22%20cy%3D%221063.5%22%20r%3D%221.7%22%20fill%3D%22%237fa5ff%22%20opacity%3D%220.42%22%2F%3E%3Ccircle%20cx%3D%22677.3%22%20cy%3D%221029.7%22%20r%3D%221.7%22%20fill%3D%22%23b6a9e8%22%20opacity%3D%220.79%22%2F%3E%3Ccircle%20cx%3D%22400.4%22%20cy%3D%22373.4%22%20r%3D%220.8%22%20fill%3D%22%23c9a9e8%22%20opacity%3D%220.97%22%2F%3E%3Ccircle%20cx%3D%221571.6%22%20cy%3D%221071.5%22%20r%3D%221.1%22%20fill%3D%22%23c9a9e8%22%20opacity%3D%220.97%22%2F%3E%3Ccircle%20cx%3D%22638.2%22%20cy%3D%22339.7%22%20r%3D%221.3%22%20fill%3D%22%23efe7ff%22%20opacity%3D%220.49%22%2F%3E%3Ccircle%20cx%3D%221235.8%22%20cy%3D%22987%22%20r%3D%221.0%22%20fill%3D%22%23c9a9e8%22%20opacity%3D%220.75%22%2F%3E%3Ccircle%20cx%3D%22281.3%22%20cy%3D%221386.6%22%20r%3D%221.3%22%20fill%3D%22%23efe7ff%22%20opacity%3D%220.42%22%2F%3E%3Ccircle%20cx%3D%22944%22%20cy%3D%22683.4%22%20r%3D%221.1%22%20fill%3D%22%23c9a9e8%22%20opacity%3D%220.78%22%2F%3E%3Ccircle%20cx%3D%221484.5%22%20cy%3D%221202.2%22%20r%3D%221.5%22%20fill%3D%22%23c9a9e8%22%20opacity%3D%220.49%22%2F%3E%3Ccircle%20cx%3D%221313.3%22%20cy%3D%22442.2%22%20r%3D%221.2%22%20fill%3D%22%23b6a9e8%22%20opacity%3D%220.59%22%2F%3E%3Ccircle%20cx%3D%22828%22%20cy%3D%22149.4%22%20r%3D%220.9%22%20fill%3D%22%23b6a9e8%22%20opacity%3D%220.58%22%2F%3E%3Ccircle%20cx%3D%22927.7%22%20cy%3D%22272.6%22%20r%3D%220.9%22%20fill%3D%22%237fa5ff%22%20opacity%3D%220.95%22%2F%3E%3Ccircle%20cx%3D%22997.5%22%20cy%3D%22515.8%22%20r%3D%221.2%22%20fill%3D%22%237fa5ff%22%20opacity%3D%220.41%22%2F%3E%3Ccircle%20cx%3D%22547%22%20cy%3D%221370.4%22%20r%3D%220.8%22%20fill%3D%22%237fa5ff%22%20opacity%3D%220.68%22%2F%3E%3Ccircle%20cx%3D%221008.8%22%20cy%3D%2216.9%22%20r%3D%221.7%22%20fill%3D%22%23c9a9e8%22%20opacity%3D%220.61%22%2F%3E%3C%2Fsvg%3E");  background-size: 1600px 1400px; opacity: 0.55; animation: dustLift 23s cubic-bezier(.4,0,.6,1) infinite; }
@media (prefers-reduced-motion: reduce) { .sky-band { animation: none !important; } }
.bg-layer { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
/* Lit at one edge, dark at the other. Sections alternate direction, so at
   every other seam two lit edges meet and pool, and the seams between are
   the dark troughs — the page reads light, dark, light down its length. */
.bg-fade {
  background-image: linear-gradient(to bottom, rgba(22,11,51,1) 0%, rgba(22,11,51,0) 22%);
}
.bg-fade--up {
  background-image: linear-gradient(to top, rgba(22,11,51,1) 0%, rgba(22,11,51,0) 22%);
}
.bg-vig {
  background-image:
    radial-gradient(70% 100% at 50% 0%, rgba(138,127,208,0.16), transparent 72%),
    radial-gradient(130% 90% at 50% 128%, rgba(14,6,34,0.9), transparent 72%);
}
.bg-vig--up {
  background-image:
    radial-gradient(70% 100% at 50% 100%, rgba(138,127,208,0.16), transparent 72%),
    radial-gradient(130% 90% at 50% -28%, rgba(14,6,34,0.9), transparent 72%);
}
.bg-vig-hero {
  background-image:
    radial-gradient(72% 100% at 50% 0%, rgba(138,127,208,0.22), transparent 70%),
    radial-gradient(120% 80% at 50% 125%, rgba(14,6,34,0.88), transparent 70%);
}
/* 40px pitch lands on whole device pixels at --page-scale 1.1 (40 x 1.1 = 44),
   and the soft line edge keeps any residual half-pixel from doubling a line. */
.bg-grid {
  background-image:
    linear-gradient(to right, rgba(90,62,150,0.42) 0, rgba(90,62,150,0.42) 0.6px, transparent 1.4px),
    linear-gradient(to bottom, rgba(90,62,150,0.42) 0, rgba(90,62,150,0.42) 0.6px, transparent 1.4px);
  /* Pitch and origin are set from the content column at runtime, so a line
     falls on each container edge and rows continue across section seams. */
  background-size: var(--grid-pitch, 40px) var(--grid-pitch, 40px);
  background-position: var(--grid-x, 0) var(--grid-y, 0);
  -webkit-mask-image: radial-gradient(110% 100% at 100% 0%, #000 5%, transparent 70%);
  mask-image: radial-gradient(110% 100% at 100% 0%, #000 5%, transparent 70%);
}
/* Hero: horizontal rules sit at the END of each cell, so the first whole
   square starts at the section border without doubling it. */
.bg-grid--top {
  /* Runs up into the 2px section border so the vertical lines meet it
     instead of starting a pixel below; the 2px offset keeps the cell
     boundaries measured from the border itself. */
  top: -2px;
  background-image:
    linear-gradient(to right, rgba(90,62,150,0.42) 0, rgba(90,62,150,0.42) 0.6px, transparent 1.4px),
    linear-gradient(to bottom, transparent calc(100% - 1.4px), rgba(90,62,150,0.42) calc(100% - 0.6px));
}
/* Closing band: same grid entering from the opposite corner. */
.bg-grid--end {
  -webkit-mask-image: radial-gradient(110% 100% at 0% 100%, #000 5%, transparent 68%);
  mask-image: radial-gradient(110% 100% at 0% 100%, #000 5%, transparent 68%);
}
/* Seam between sections: a rule that fades out at both ends */
.bg-beam {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px; inset-block-start: auto;
  background: linear-gradient(to right, transparent, rgba(138,127,208,0.62) 50%, transparent);
  pointer-events: none; z-index: 0;
}
/* Same rule as the section seams, in flow rather than pinned to a seam —
   full-bleed out of the container so it spans the page as they do. */
.rule-beam {
  height: 2px;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: linear-gradient(to right, transparent, rgba(138,127,208,0.62) 50%, transparent);
}

.card-heading {
  font-family: 'Space Grotesk Patched', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.35;
  color: var(--text-heading);
  margin-bottom: 10px;
}

.card-body {
  font-family: 'Space Grotesk Patched', sans-serif;
  font-size: 14px;
  color: var(--text-body);
  line-height: 1.7;
}

/* Buttons */
/* One button box everywhere, taken from the header CTA: 15px pixel type,
   6.8px/15px padding, and an explicit 1.7 line-height, which lands a 42px box. The line-height has to
   be stated because these are a mix of <a> and <button> — anchors inherit
   the body's 1.7 while buttons default to normal, which rendered the same
   padding 8px taller on the links. */
.btn-filled {
  display: inline-block;
  background: var(--accent);
  color: var(--bg-deeper);
  font-family: var(--font-pixel);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.7;
  padding: 6.8px 15px;
  border-radius: 0;
  border: var(--rule) solid var(--accent);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  text-decoration: none;
}
.btn-filled:hover { background: transparent; color: var(--accent); }

/* Offset button: a hard shadow the button presses into on hover. */
.btn-offset {
  position: relative;
  background: var(--text-heading);
  color: var(--bg-deeper);
  border: var(--rule) solid var(--text-heading);
  box-shadow: 5px 5px 0 var(--accent);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.btn-offset:hover {
  background: var(--text-heading);
  color: var(--bg-deeper);
  transform: translate(3px, 3px);
  box-shadow: 2px 2px 0 var(--accent);
}
.btn-offset:active {
  transform: translate(5px, 5px);
  box-shadow: 0 0 0 var(--accent);
}
@media (prefers-reduced-motion: reduce) {
  .btn-offset { transition: none; }
}

/* Footer and inline links: underline grows in from the left on hover. */
.link-underline {
  position: relative;
  text-decoration: none;
  transition: color 0.18s ease;
}
.link-underline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 1px;
  width: 100%;
  height: var(--hair);
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.18s ease;
}
.link-underline:hover { color: var(--text-heading); }
.link-underline:hover::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .link-underline::after { transition: none; }
}

.btn-ghost {
  display: inline-block;
  background: transparent;
  color: var(--text-heading);
  font-family: var(--font-pixel);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.7;
  padding: 6.8px 15px;
  border-radius: 0;
  border: var(--rule) solid var(--text-heading);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  text-decoration: none;
}
.btn-ghost:hover { background: var(--text-heading); color: var(--bg-deeper); }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: var(--rule) solid var(--accent-light);
  outline-offset: 2px;
}


/* Section spacing */
section {
  padding: 80px 0;
  border: var(--rule) solid var(--border);
  border-top: none;
  border-bottom: none;
  position: relative;
  overflow: hidden;
}
section > .container { position: relative; z-index: 2; }
/* Fragment jumps stop at the section's own edge, clear of the fixed nav. */
section[id] { scroll-margin-top: var(--nav-h, 68px); }

/* Hero mark: hovering lifts it and lights it, then it hangs and sways as if
   picked up on a rope. Two elements on purpose — the lift is a transition
   and the sway is an animation, and they would otherwise fight over one
   transform. The hover is taken on the wrapper so the mark can't move out
   from under the cursor and make the effect stutter. */
/* The hover target is the mark itself, not the layout column it sits in,
   which was 24px wider on each side. The one place it is deliberately
   larger is upward: the mark rises 32px, and that band has to stay live or
   the raised mark would sit outside its own target and drop the hover.
   Negative margin cancels the padding, so nothing shifts on the page. */
.hero-mark-hit {
  width: fit-content;
  margin: -32px auto 0;
  padding-top: 32px;
}
.hero-mark-lift {
  /* Neither direction waits on the glow: the mark moves the instant the
     pointer arrives or goes, and the light rides along with it. Rise and
     descent share one duration and one curve, so the rope moves at the
     same rate both ways. */
  transition: transform 1.3s cubic-bezier(.22,0,.35,1),
              filter 0.85s ease;
  will-change: transform, filter;
}
/* Driven by a class, not :hover, so entering and leaving can use different
   targets: you have to be on the mark itself for it to lift, but once it is
   up you keep it until you leave the whole corridor. Matching thresholds
   would make it flutter — the mark rises out from under the pointer, drops
   the hover, falls back into it, and lifts again. */
.hero-mark-hit.lifted .hero-mark-lift {
  transition: transform 1.3s cubic-bezier(.22,0,.35,1),
              filter 0.7s ease;
  transform: translateY(-32px);
  filter: drop-shadow(0 0 16px rgba(80,131,255,0.55))
          drop-shadow(0 0 44px rgba(80,131,255,0.32));
}
/* No script: the class above is never applied, so fall back to a plain
   hover on the corridor. Scripted pages set the js flag and use the tighter
   target instead. */
html:not(.js) .hero-mark-hit:hover .hero-mark-lift {
  transition: transform 1.3s cubic-bezier(.22,0,.35,1),
              filter 0.7s ease;
  transform: translateY(-32px);
  filter: drop-shadow(0 0 16px rgba(80,131,255,0.55))
          drop-shadow(0 0 44px rgba(80,131,255,0.32));
}
/* Three layers, each owning one transform: the lift is a CSS transition,
   the drifting anchor and the swing are animations, and all three would
   otherwise fight over a single transform property. */
.hero-mark-float { will-change: transform; }
/* Pivot at the top edge: the mark swings from where the rope would hold it. */
.hero-mark-img { transform-origin: 50% 0%; will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .hero-mark-lift { transition: filter 0.45s ease; }
  .hero-mark-hit.lifted .hero-mark-lift { transform: none; }
  html:not(.js) .hero-mark-hit:hover .hero-mark-lift { transform: none; }
}
@media (max-width: 768px) { section { padding: 48px 0; } }


/* ---- Screenshots (Issues 5a / 3a) ----
   The violet tint that makes Discord's grey read as part of the palette is
   baked into the image files (originals kept in assets/screens/originals/) —
   as a live mix-blend-mode overlay it had to recomposite against a moving
   backdrop on every scroll frame, which artefacted. */
.shot { position: relative; isolation: isolate; display: block; perspective: 1200px; }
.shot-tilt {
  position: relative;
  display: block;
  transform-style: preserve-3d;
  /* The return to flat rides the hero mark's curve; while tracking the
     pointer the script clears the transition and drives every frame. */
  /* A dim glow at rest, brightened and thrown sideways on hover. */
  box-shadow: 0 6px 20px rgba(5,2,16,0.40);
  transition: transform 1.1s cubic-bezier(.22,0,.35,1),
              box-shadow 1.1s cubic-bezier(.22,0,.35,1);
}
.shot-tilt > img { width: 100%; height: auto; display: block; }
/* Deliberately NOT mix-blend-mode: a live blend layer has to recomposite
   against its backdrop every frame, which is what artefacted on scroll. */
.shot-sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}
/* Touch devices fire pointerenter on tap and never leave, which would strand
   a panel mid-tilt. */
@media (hover: none) {
  .shot-tilt { transform: none !important; box-shadow: none !important; }
  .shot-sheen { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .shot-tilt { transition: none; }
}

/* Filmstrip (Issue 5a): numerals, no card frames. Copy at the top of each
   column, screenshots pushed to a shared bottom line — the three sources
   are equal squares, so equal column widths make equal image heights and
   the strip lines up without fixed sizes. */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}
.step-col { display: flex; flex-direction: column; gap: 24px; }
.step-copy { display: flex; flex-direction: column; gap: 8px; flex: 1; }
/* Side by side, a paragraph gaining or losing a line changes the whole row's
   height, and everything below it jumps. Reserving the three-line height
   means the common two/three-line rewrap costs no layout at all. */
@media (min-width: 901px) {
  .step-copy { min-height: 136px; }
  .step-copy p { text-wrap: pretty; }
}
.step-num {
  font-family: var(--font-pixel);
  font-size: 26px;
  line-height: 1;
  color: var(--accent);
}
.step-shot { margin-top: auto; }
@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr; gap: 40px; }
  /* Single column, a step shot would otherwise stretch to the container —
     and the copy above it has to share that width so the join button ends
     flush with the screenshot beneath it. */
  .step-col { max-width: 520px; }
  .step-shot .shot { max-width: 520px; }
}

/* Alternating offer rows. Equal columns, so the text in the first row
   starts at the same x as the screenshot in the second. */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
.split-copy { display: flex; flex-direction: column; gap: 14px; }
/* Each side is its own column, so the gap between a screenshot and the copy
   beneath it is the same on the left as on the right at any viewport width.
   Order values keep the reading order correct when the columns flatten. */
.split-col { display: flex; flex-direction: column; gap: 56px; }
@media (max-width: 900px) {
  .split { display: flex; flex-direction: column; gap: 56px; }
  .split-col { display: contents; }
  /* Stacked, a shot would otherwise stretch to the full container and jump
     to roughly twice the size it had in two columns. */
  .split .shot { max-width: 520px; }
}

/* Footer: keep each link on one line and let the row wrap instead. */
.footer-links { flex-wrap: wrap; }
@media (max-width: 600px) { .footer-links { gap: 16px !important; } }
.footer-links a.link-underline { white-space: nowrap; }

/* Testimonials: both columns on one grid, screenshots in a shared row.
   The right cell stretches to the left column's three shots, which puts
   its top edge on the first shot and its bottom edge on the third — the
   alignment holds at any width, with no fixed heights to fall out of date. */
.testi {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 56px;
  row-gap: 18px;
  align-items: stretch;
}
.testi-col { display: flex; flex-direction: column; gap: 18px; height: 100%; }
/* These five are wide, low-resolution crops (about 600×200). Stretching them to
   the column width upscales past their pixels — worst at one column, where the
   column is the whole page. They shrink to fit but never grow past native size,
   and the frame tracks the image rather than the column. */
.testi .shot { width: fit-content; max-width: 100%; }
.testi .shot-tilt > img { width: auto; max-width: 100%; }
.testi-copy { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.eyebrow {
  font-family: var(--font-pixel);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.7;
  color: var(--accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* Side by side only at the container's full width: below that the right
   column's copy needs more height than the left column's three shots
   leave it, and the bottom edges would stop meeting. */
@media (max-width: 1024px) {
  .testi { grid-template-columns: 1fr; }
  /* The empty cell only exists to hold the right column's top edge level
     with the first screenshot; stacked, there is nothing to level. */
  .testi-spacer { display: none; }
  /* Stacked, the five crops sit in one column at their own native widths, so
     their right edges ragged. Cap every shot to the narrowest native width
     (523px) so they share an edge without any of them being upscaled. */
  .testi .shot { width: 100%; max-width: 520px; }
  .testi .shot-tilt > img { width: 100%; }
}

/* ---- Lineup sheet (Issue 4a) ----
   The page had no table before this one. Rules, pixel-font numerals and
   muted column heads, so it reads as the same family as the cards. */
.sheet {
  border: var(--rule) solid var(--border);
  background: var(--bg-deeper);
  padding: 28px 32px 0;
}
.sheet-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.sheet-tag {
  font-family: var(--font-pixel);
  font-size: 13px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: var(--rule) solid var(--border);
  padding: 3px 10px;
}
.sheet-body { position: relative; }
/* Safety net at the narrowest widths, after two columns have already been
   dropped below 1024. The fade sits outside the scroller so it stays put. */
.sheet-scroll {
  overflow-x: auto;
}
/* Chrome drops every ::-webkit-scrollbar rule as soon as scrollbar-color is
   set, falling back to the native bar (arrows and all), so the standard
   properties are scoped to Firefox, which has no webkit pseudos. */
@supports (-moz-appearance: none) {
  .sheet-scroll { scrollbar-width: thin; scrollbar-color: var(--accent) transparent; }
}
/* Auto, not scroll: pinned on, the bar renders as an empty groove at widths
   where the table already fits. */
.sheet-scroll::-webkit-scrollbar { height: 5px; }
/* No groove and no arrows, so it reads as the bar the phone draws. */
.sheet-scroll::-webkit-scrollbar-track { background: transparent; }
.sheet-scroll::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.sheet-scroll::-webkit-scrollbar-thumb { background: var(--accent); }
.sheet-scroll::-webkit-scrollbar-thumb:hover { background: var(--accent-light); }
.sheet-fade {
  position: absolute;
  left: 0; right: 0;
  /* Stops above the scrollbar track: the rows fade, the bar stays crisp. */
  bottom: 6px;
  /* Short enough to leave all six rows legible — it only softens the bottom
     edge of the last one now, rather than swallowing a row and a half. */
  height: 44px;
  background: linear-gradient(to bottom, transparent, var(--bg-deeper) 96%);
  pointer-events: none;
}
.sheet-foot {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-bottom: 28px;
}
.lineup { width: 100%; border-collapse: collapse; }
.lineup th {
  font-family: var(--font-pixel);
  font-weight: 400;
  font-size: 13px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: left;
  white-space: nowrap;
  /* Same right padding as the body cells, or the labels drift out of column. */
  padding: 0 16px 12px 0;
}
.lineup td {
  font-size: 15px;
  color: var(--text-body);
  padding: 10px 16px 10px 0;
  border-top: var(--rule) solid var(--border);
}
.lineup th:last-child, .lineup td:last-child { padding-right: 0; }
/* Status is a word column between two number columns; it needs air on its left
   so it does not read as part of the avg-views figure. */
.lineup .col-status, .lineup .cell-status { padding-left: 28px; }
.lineup .num { text-align: right; font-family: var(--font-pixel); }
.lineup .cell-index { font-family: var(--font-pixel); font-size: 14px; color: var(--accent); }
.lineup .cell-name { font-size: 16px; color: var(--text-heading); white-space: nowrap; }
.lineup .cell-platform { color: var(--text-muted); }
.lineup .cell-price { color: var(--text-heading); white-space: nowrap; }
.lineup .cell-status {
  font-family: var(--font-pixel);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: var(--text-muted);
}
.lineup .cell-status--approved { color: var(--accent-light); }
.lineup .cell-status--declined { color: color-mix(in srgb, var(--text-muted) 60%, var(--bg-primary)); }
/* All seven columns need 771px and the container gives 976, so they hold to
   just past 820px wide. Below that the table simply scrolls sideways inside
   .sheet-scroll — no column is hidden, so the bar appears exactly when
   something has gone past the edge. */
@media (max-width: 768px) {
  .sheet { padding: 20px 20px 0; }
  .lineup td { font-size: 14px; }
  .lineup .cell-name { font-size: 15px; }
}

/* Grid helpers */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 8px;
  margin: -8px;
}
@media (max-width: 768px) {
  .grid-3 { grid-template-columns: 1fr; }
}

/* Form inputs */
.form-input, .form-textarea {
  width: 100%;
  background: var(--bg-deeper);
  border: var(--rule) solid var(--border);
  border-radius: 0;
  color: var(--text-heading);
  font-family: 'Space Grotesk Patched', sans-serif;
  /* 16px, not 15: iOS Safari zooms the page when a field below 16px is focused. */
  font-size: 16px;
  padding: 12px 16px;
  transition: border-color 0.2s;
  outline: none;
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--text-muted); }
select.form-input option { background: var(--bg-deeper); color: var(--text-heading); }
.form-input:focus, .form-textarea:focus { border-color: var(--accent); }
.form-textarea { resize: vertical; min-height: 120px; }

.form-label {
  display: block;
  font-family: var(--font-pixel);
  font-size: 15px;
  font-weight: 500;
  color: var(--text-body);
  margin-bottom: 6px;
}

.form-group { margin-bottom: 16px; }

/* ---- About page ---- */
/* Wider than the 1024px site container, but not 1200: the page carries
   zoom: 1.1, so a 1248px box would render 1373 device px and overflow a
   1366-wide laptop. 1128 renders 1241 and still clears 1280. The nav and
   footer keep the site container so the chrome matches the home page. */
.container-wide { max-width: 1128px; margin: 0 auto; padding: 0 24px; }
.about-page-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 440px;
  gap: 56px;
  /* The form column is shorter than the letter, so it centres against it
     rather than hanging from the top. */
  align-items: center;
}
.about-letter { display: flex; flex-direction: column; gap: 16px; max-width: 600px; margin-bottom: 28px; }
.about-letter p { font-size: clamp(16px, 2vw, 17px); line-height: 1.75; color: var(--text-body); }
.founder-link {
  display: flex;
  align-items: center;
  gap: 14px;
  width: fit-content;
  text-decoration: none;
  transition: opacity 0.2s;
}
.founder-link:hover { opacity: 0.85; }
.founder-link:hover .founder-sub { color: var(--accent-light); }
.founder-link .founder-sub { transition: color 0.2s; }
.about-sign-rule {
  height: var(--rule);
  max-width: 600px;
  margin-bottom: 22px;
  background: linear-gradient(to right, transparent, rgba(138,127,208,0.62) 50%, transparent);
}
@media (max-width: 980px) {
  .about-page-grid { grid-template-columns: 1fr; gap: 48px; align-items: start; }
  .about-letter, .about-sign-rule { max-width: none; }
  #contact { max-width: 500px; }
}