:root { color-scheme: dark; font-family: Arial, Helvetica, sans-serif; background: #050505; color: #fff; }
* { box-sizing: border-box; }
body { margin: 0; }
.landing { height: 100svh; min-height: 420px; overflow: hidden; position: relative; background: #050505; }
.scene { position: absolute; inset: 0; perspective: 1100px; overflow: hidden; }
.wires { position: absolute; left: 50%; top: 48%; width: max(106vw, 183vh); aspect-ratio: 1672 / 941; transform: translate(-50%, -50%); transform-style: preserve-3d; }
.wire { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; will-change: transform; }
.wire-base { fill: none; stroke-width: 24; stroke-linecap: round; stroke-linejoin: round; }
.wire-sheen { fill: none; stroke-width: 12; stroke-linecap: round; opacity: .12; }
.pulse { fill: none; stroke-width: 24; stroke-linecap: round; opacity: .45; filter: blur(3px); }
.bead { filter: drop-shadow(0 3px 4px #0005); }
.wordmark { position: absolute; width: min(57vw, 1000px); left: 50%; top: 49%; translate: -50% -50%; will-change: transform; }
.wordmark svg { display: block; width: 100%; overflow: visible; filter: drop-shadow(0 5px 18px #0006); }
.letter { fill: none; stroke: #fbfbfb; stroke-width: 26; stroke-linecap: round; stroke-linejoin: round; }
.footer { position: absolute; bottom: 0; left: 0; width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 22px 32px; gap: 16px; background: linear-gradient(transparent, #050505c9); font-size: 12px; letter-spacing: .06em; color: #aaa; }
.signature, .domain { flex: 1; }
.domain { text-align: right; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 700px) {
 .wordmark { width: 88vw; top: 48%; }
 .wires { width: max(152vw, 135vh); top: 47%; opacity: .85; }
 .footer { padding: 20px; font-size: 11px; }
 .wire-base, .pulse { stroke-width: 20; }
}