:root { color-scheme: dark; font-family: Arial, Helvetica, sans-serif; background: #111014; color: #f4f1ed; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
.hero { min-height: 100svh; position: relative; display: flex; align-items: center; overflow: hidden; isolation: isolate; }
.hero__art { position: absolute; inset: 0; z-index: -2; background: #211a1b url('/images/robot-apocalypse.png') center center / cover no-repeat; }
.hero__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10,9,12,.94) 0%, rgba(10,9,12,.78) 34%, rgba(10,9,12,.18) 70%), linear-gradient(0deg, rgba(10,9,12,.62), transparent 32%); }
.hero__content { width: min(100%, 1340px); margin: auto; padding: 8rem clamp(1.5rem, 6vw, 6rem); }
.eyebrow { color: #d2bab6; letter-spacing: .25em; text-transform: uppercase; font-size: .72rem; font-weight: 700; margin-bottom: 2rem; }
.eyebrow span { color: #e34d46; padding: 0 .5rem; }
.wordmark { margin: 0 0 1.25rem; font-size: clamp(1rem, 1.8vw, 1.35rem); font-weight: 900; letter-spacing: .28em; }
.wordmark__dot { color: #ee4b45; }
h1 { max-width: 700px; margin: 0; font-size: clamp(3.4rem, 7vw, 7rem); line-height: .98; letter-spacing: -.065em; font-weight: 900; text-wrap: balance; }
.hero__description { color: #d5cbca; font-size: clamp(1rem, 1.5vw, 1.28rem); line-height: 1.5; margin: 2rem 0 2.5rem; }
.status { display: inline-flex; align-items: center; gap: .8rem; border: 1px solid rgba(239,90,77,.65); background: rgba(19,14,16,.55); padding: .85rem 1.2rem; color: #f5dedb; font-size: .77rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.status__light { width: .5rem; height: .5rem; border-radius: 50%; background: #f44d44; box-shadow: 0 0 12px #e74b45; }
.hero__footer { position: absolute; bottom: 1.5rem; left: clamp(1.5rem, 6vw, 6rem); margin: 0; color: #b0a2a1; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; }
@media (max-width: 700px) { .hero { align-items: end; } .hero__art { background-position: 66% center; } .hero__shade { background: linear-gradient(0deg, rgba(10,9,12,.97) 0%, rgba(10,9,12,.8) 38%, rgba(10,9,12,.15) 85%); } .hero__content { padding: 5rem 1.5rem 6rem; } .eyebrow { margin-bottom: 1.2rem; } .hero__description { margin: 1.5rem 0 2rem; } .hero__footer { bottom: 1rem; left: 1.5rem; } }