:root{color-scheme:dark;--white:#f7f7f7;--accent:#e43e36}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif}
body{background:#101319;color:var(--white);overflow-x:hidden}
.background{position:fixed;inset:0;z-index:-1;background:radial-gradient(circle at 65% 40%,#3c434d,#101319 65%)}
.background video{width:100%;height:100%;object-fit:cover;opacity:.7}
.shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,10,15,.85),rgba(7,10,15,.35)),linear-gradient(0deg,rgba(7,10,15,.55),transparent 35%)}
.page{min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
.footer{display:flex;justify-content:space-between;align-items:center;gap:20px;width:100%}
.hero{flex:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:40px clamp(24px,12vw,200px);animation:appear .9s ease both}
.eyebrow{letter-spacing:5px;font-size:11px;font-weight:700;color:#e3e3e3}
.hero h1{font-size:clamp(48px,10vw,150px);letter-spacing:-.07em;line-height:.9;margin:28px 0 32px;font-weight:900;overflow-wrap:anywhere}
.hero h1 em{font-style:normal;color:var(--accent)}
.intro{line-height:1.8;font-size:clamp(15px,1.6vw,19px);color:#e4e4e4}
.footer{padding:20px clamp(24px,6vw,100px) 30px;font-size:10px;letter-spacing:2px;color:#c7c7c7}
@keyframes appear{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:600px){.hero{padding-top:25px;padding-bottom:25px}.hero h1{font-size:clamp(42px,12vw,76px)}.eyebrow{letter-spacing:3px}.footer{font-size:9px}}
@media(prefers-reduced-motion:reduce){.hero{animation:none}}