@font-face { font-family: DM; src: url("./assets/site-brand/dm-sans-latin.woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: Space; src: url("./assets/site-brand/space-grotesk-latin.woff2"); font-weight: 300 700; font-display: swap; }
* { box-sizing: border-box; }
html { background: #08090c; color: #f6f4ed; }
body { margin: 0; min-height: 100svh; display: flex; flex-direction: column; font: 16px/1.65 DM, sans-serif; isolation: isolate; }
.atmosphere { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: radial-gradient(ellipse at 0 15%,#12404b,transparent 58%),radial-gradient(ellipse at 100% 100%,#23291a,transparent 45%),#08090c; }
.atmosphere::before { content: ""; position: absolute; inset: -500px; background: repeating-linear-gradient(135deg,transparent 0 130px,#f6f4ed04 130px 190px,transparent 190px 340px); animation: drift 52s linear infinite; }
.atmosphere::after { content: ""; position: absolute; inset: 0; opacity: .2; background: radial-gradient(#f6f4ed44 .6px,transparent 1px) 0 0/6px 6px; }
header,footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 32px clamp(24px,6vw,100px); }
header img { width: min(280px,65vw); height: auto; }
header span { color: #b1b6bf; font-size: 13px; }
main { width: 100%; max-width: 1440px; margin: auto; padding: 72px clamp(24px,6vw,100px) 100px; }
.eyebrow { margin: 0 0 25px; color: #22d3ee; font-size: 14px; }
h1 { margin: 0; font: 600 clamp(52px,8.5vw,124px)/1.02 Space,sans-serif; letter-spacing: -.065em; }
h1 em { color: #22d3ee; font-style: normal; }
.intro { max-width: 530px; margin: 32px 0; color: #b1b6bf; font-size: 18px; }
.home-link { display: inline-flex; align-items: center; gap: 36px; padding: 16px 22px; color: #08090c; background: #f6f4ed; font-weight: 650; text-decoration: none; transition: background .2s; }
.home-link:hover { background: #22d3ee; }
.home-link:focus-visible { outline: 2px solid #22d3ee; outline-offset: 5px; }
footer { color: #929aa8; font-size: 12px; border-top: 1px solid #f6f4ed14; }
@keyframes drift { to { transform: translate3d(-480.832611px,0,0); } }
@media(max-width:600px) { header { padding-top: 24px; } header span { display: none; } main { padding-top: 60px; padding-bottom: 70px; } .intro { font-size: 16px; } footer { flex-wrap: wrap; gap: 8px; } }
@media(prefers-reduced-motion:reduce) { .atmosphere::before { animation: none; } }