:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #090a0a; }
body { font-family: Archivo, Arial, sans-serif; cursor: none; }
#field, .grain { position: fixed; inset: 0; width: 100%; height: 100%; }
#field { z-index: 0; }
.grain { z-index: 3; pointer-events: none; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E"); }
.system { min-height: 100%; position: relative; z-index: 2; display: grid; place-items: center; isolation: isolate; }
.identity { text-align: center; position: relative; transform: translateY(-.6vmin); }
.mallon { margin: 0; display: flex; justify-content: center; color: #e5e4df; font-size: clamp(4.15rem, 13.45vw, 15.75rem); line-height: .78; font-weight: 600; letter-spacing: -.095em; }
.mallon span { display: inline-block; will-change: transform, filter; text-shadow: 0 0 1px rgba(255,255,255,.35); }
.industries { margin: clamp(1.4rem, 3.2vw, 3.4rem) 0 0; color: rgba(221,222,216,.40); font-size: clamp(.55rem, .83vw, .85rem); font-weight: 500; letter-spacing: .75em; padding-left: .75em; transition: color 900ms ease, letter-spacing 900ms ease; }
.identity.near .industries { color: rgba(230,231,223,.75); letter-spacing: .89em; }
.identity::after { content: ''; position: absolute; left: 14%; right: 14%; top: 61%; height: 1px; background: rgba(217,222,209,.11); transform: scaleX(0); transform-origin: 50%; transition: transform 1.4s cubic-bezier(.18,.8,.18,1); }
.identity.near::after { transform: scaleX(1); }
.telemetry { position: fixed; right: 3.5vw; bottom: 3.2vw; display: flex; flex-direction: column; gap: .55rem; color: rgba(221,224,216,0); font-size: 8px; font-weight: 500; letter-spacing: .22em; text-align: right; transition: color 1s ease; }
.telemetry.reveal { color: rgba(221,224,216,.36); }
.division { position: fixed; z-index: 4; left: 3vw; bottom: 2.7vw; width: min(360px, calc(100vw - 3rem)); display: grid; gap: .45rem; color: rgba(225,227,219,.42); text-decoration: none; font-size: 8px; font-weight: 500; letter-spacing: .19em; transition: color .5s ease; }
.division::before { content: ''; width: 100%; height: 1px; background: rgba(225,227,219,.18); transform-origin: left; transition: transform .6s cubic-bezier(.2,.8,.2,1), background .5s; }
.division strong { color: rgba(231,231,224,.80); font-size: 11px; letter-spacing: .13em; font-weight: 500; }
.division em { max-width: 290px; font-style: normal; font-size: 7px; line-height: 1.6; letter-spacing: .16em; }
.division b { margin-top: .5rem; color: rgba(231,231,224,.7); font-size: 8px; font-weight: 500; letter-spacing: .17em; }
.division:hover { color: rgba(238,239,231,.9); } .division:hover::before { transform: scaleX(.3); background: rgba(238,239,231,.85); }
.cursor { position: fixed; top: 0; left: 0; z-index: 10; width: 11px; height: 11px; border: 1px solid rgba(237,238,229,.85); border-radius: 50%; pointer-events: none; mix-blend-mode: difference; transform: translate(-50%, -50%); transition: width .35s ease, height .35s ease, border-color .35s ease; }
.cursor i { position: absolute; left: 50%; top: 50%; width: 2px; height: 2px; border-radius: 50%; background: #fff; transform: translate(-50%, -50%); }
.cursor.engaged { width: 24px; height: 24px; border-color: rgba(237,238,229,.45); }
@media (hover: none) { body { cursor: auto; } .cursor { display: none; } .telemetry { right: 1.5rem; bottom: 1.5rem; } }
@media (max-width: 600px) { .mallon { font-size: clamp(3.35rem, 17.8vw, 6rem); } .industries { font-size: .52rem; letter-spacing: .57em; padding-left: .57em; } .identity.near .industries { letter-spacing: .64em; } }