:root {
  --ink: #0c1b2a;
  --paper: #f7f6f1;
  --blue: #2d70cf;
  --orange: #ef754d;
  --line: rgba(12, 27, 42, 0.13);
}

* { box-sizing: border-box; }

html { min-height: 100%; }

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 87% 19%, rgba(237, 183, 77, 0.16), transparent 23rem),
    radial-gradient(circle at 4% 90%, rgba(68, 149, 209, 0.12), transparent 26rem),
    var(--paper);
  font-family: "DM Sans", Arial, sans-serif;
}

.page-shell {
  width: min(100%, 1440px);
  min-height: 100vh;
  margin: auto;
  padding: 32px clamp(24px, 6vw, 96px) 24px;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  isolation: isolate;
}

#shader-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  opacity: 0.72;
  pointer-events: none;
}

footer { display: flex; align-items: center; justify-content: space-between; font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; }

.hero { position: fixed; inset: 0; z-index: 2; width: 100%; height: 100dvh; pointer-events: none; text-align: center; }
.hero-brand { position: absolute; top: 50%; left: 0; width: 100%; margin: 0; color: #fff; font-size: clamp(54px, 8vw, 116px); line-height: .96; letter-spacing: 0.045em; font-weight: 700; text-shadow: 0 2px 22px rgba(12, 27, 42, .12); transform: translateY(-50%); }
.hero-subtitle { position: absolute; top: calc(50% + clamp(48px, 6vw, 78px)); left: 0; width: 100%; margin: 0; color: rgba(255, 255, 255, .84); font-size: clamp(15px, 1.5vw, 18px); font-weight: 500; letter-spacing: -0.025em; }

footer { margin-top: auto; padding-top: 20px; color: #71808d; border-top: 1px solid var(--line); }

@media (max-width: 760px) {
  .page-shell { padding-top: 24px; }
  footer { font-size: 9px; }
}

@media (max-width: 410px) {
  .hero-brand { font-size: 50px; }
}