/* Metrascend holding page (v2, 2026-10-10). Ben: beautiful, reveals the brand, hints at what it does, nothing more.
   Night look from the brand kit: ink canvas, blue glow, the 12-column grid as faint texture, and the arrowhead from the
   mark rising off the bottom edge. Self-hosted fonts, no scripts, no third-party requests (CSP in _headers). */
@font-face { font-family: "Metrascend Sans"; src: url(/assets/fonts/MetrascendSans-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Metrascend Sans"; src: url(/assets/fonts/MetrascendSans-SemiBold.woff2) format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --ink: #0B1220; --primary: #4D8EF7; --text: #FFFFFF; --soft: #C9D3E3; --muted: #9AA6BA;
  --m: clamp(16px, 6vw, 96px);          /* outer margin: 16 px on a phone, growing with the screen */
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ink); color: var(--text);
  font: 400 1rem/1.5 "Metrascend Sans", Aptos, "Segoe UI", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }

.stage { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; display: flex; align-items: center;
  padding: var(--m);
  background:
    radial-gradient(55% 50% at 0% 0%, rgba(0, 68, 146, 0.50), transparent 72%),
    radial-gradient(70% 65% at 96% 108%, rgba(14, 103, 242, 0.55), transparent 70%),
    var(--ink); }

/* The 12-column grid, drawn faintly and dissolving downwards. */
.stage::before { content: ""; position: absolute; inset: 0 var(--m); pointer-events: none;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px calc(100% / 12));
  -webkit-mask-image: linear-gradient(#000, transparent 80%); mask-image: linear-gradient(#000, transparent 80%); }

/* The arrowhead from the mark: rises once on arrival, then glows slowly. */
/* Sized by whichever is tighter, half the width or the height, so it never runs behind the text in tall windows. */
.arrow { --aw: min(50vw, calc(116svh * 0.789)); position: absolute; right: calc(var(--m) * 0.6); bottom: calc(var(--aw) * -0.30);
  width: var(--aw); height: auto; aspect-ratio: 189.4 / 240.06;
  animation: rise 2.4s cubic-bezier(0.2, 0.7, 0.1, 1) both, breathe 9s ease-in-out 2.4s infinite; }
@keyframes rise { from { transform: translateY(7%); filter: brightness(0.25); } to { transform: none; filter: none; } }
@keyframes breathe { 0%, 100% { filter: none; } 50% { filter: brightness(0.82); } }

.mark { position: relative; z-index: 1; max-width: 40rem; }
.eyebrow { margin: 0 0 28px; font-weight: 600; font-size: 0.75rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--primary); }
h1 { margin: 0; display: flex; align-items: flex-start; gap: 0.3em; line-height: 1; }
.lockup { display: block; width: clamp(240px, 34vw, 460px); height: auto; }
.tm { font-weight: 400; font-size: clamp(0.65rem, 1vw, 0.9rem); color: var(--muted); margin-top: -0.2em; }
.hint { margin: 32px 0 40px; font-size: clamp(1.15rem, 2vw, 1.55rem); line-height: 1.35; color: var(--soft); max-width: 21ch; text-wrap: balance; }

/* A quiet way to reach the company: not a call to action, and no promise of access. */
.contact { color: var(--muted); font-size: 0.9375rem; text-decoration: none; letter-spacing: 0.01em;
  border-bottom: 1px solid rgba(154, 166, 186, 0.35); padding-bottom: 2px; transition: color 0.2s, border-color 0.2s; }
.contact:hover { color: var(--text); border-bottom-color: var(--primary); }
.contact:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; border-radius: 2px; }

.legal { position: absolute; z-index: 1; left: var(--m); bottom: max(20px, env(safe-area-inset-bottom)); margin: 0;
  font-size: 0.75rem; color: var(--muted); }

/* 404 page */
.back { color: var(--soft); text-underline-offset: 0.2em; }

@media (max-width: 720px) {
  .stage { align-items: flex-start; padding-top: 20svh; }
  .arrow { --aw: min(110vw, calc(88svh * 0.789)); right: -22vw; bottom: calc(var(--aw) * -0.25); opacity: 0.5; }
  .eyebrow { margin-bottom: 22px; }
  .hint { margin: 26px 0 32px; max-width: 24ch; text-wrap: pretty; }
}
@media (prefers-reduced-motion: reduce) { .arrow { animation: none; } .contact { transition: none; } }