.home { color-scheme: dark; background: #000; color: #fff; }
.intro { max-width: 680px; margin: auto; padding: 48px 24px 34px; text-align: center; }
.brand { display: flex; align-items: center; justify-content: center; gap: 2px; }
.brand img { filter: invert(1); width: 90px; height: 66px; }
.brand h1 { font-size: 60px; line-height: 1.1; }
.home p { font-weight: 400; color: #aaa; }
.home .lead { color: #fff; font-size: 24px; margin-top: 24px; }
.preview { margin: 0 auto; width: min(340px, calc(100% - 48px)); }
.preview video { display: block; width: 100%; aspect-ratio: 9 / 16; background: #111; border-radius: 8px; }
.about { max-width: 680px; margin: auto; padding: 64px 24px; text-align: center; }
.about h2 { font-size: 28px; line-height: 1.3; font-weight: 600; margin: 0; }
.about p { line-height: 1.7; }
.home footer { max-width: 1000px; margin: auto; padding: 28px 24px; border-top: 1px solid #222; display: flex; justify-content: space-between; gap: 24px; color: #888; font-size: 14px; }
.home footer nav { display: flex; gap: 24px; }
.home a { color: #bbb; text-decoration: none; }
.home a:hover { color: #fff; text-decoration: underline; }
.home :focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
@media(max-width:600px) { .intro { padding-top: 32px; } .brand h1 { font-size: 48px; } .brand img { width: 72px; height: 54px; } .home .lead { font-size: 21px; } .intro p { font-size: 16px; } .about { padding-block: 48px; } .about h2 { font-size: 24px; } .home footer { flex-wrap: wrap; } }