:root { color-scheme: dark; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #f2f3f5; background: #15171a; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: .3em; }
a:focus-visible { outline: 3px solid #a5f3cd; outline-offset: 6px; }
header, main, footer { width: min(1160px, calc(100% - 64px)); margin-inline: auto; }
header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 30px; border-bottom: 1px solid #383b40; }
.brand { display: flex; align-items: center; gap: 12px; font-size: 1.125rem; font-weight: 650; }
.brand img { object-fit: contain; }
nav { display: flex; gap: 28px; font-size: .9375rem; color: #c4c7ce; }
.intro { padding-block: clamp(64px, 9vw, 128px) 100px; }
.eyebrow { font-size: .875rem; letter-spacing: .12em; text-transform: uppercase; color: #a5f3cd; margin: 0 0 28px; }
h1 { font-size: clamp(2.8rem, 6vw, 5rem); line-height: 1.08; letter-spacing: -.055em; font-weight: 600; margin: 0; }
.summary { max-width: 610px; color: #bcc1ca; font-size: 1.25rem; line-height: 1.65; margin: 28px 0 36px; }
.download { display: inline-flex; gap: 36px; align-items: center; padding: 17px 22px; color: #111b16; background: #a5f3cd; font-weight: 650; border-radius: 8px; font-size: 1rem; }
.download:hover { background: #c2ffdf; text-decoration: none; }
.requirements { font-size: .875rem; color: #939ba7; margin-top: 18px; }
.features { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #383b40; margin-bottom: 90px; }
article { padding: 28px 32px 0 0; }
article + article { padding-left: 32px; border-left: 1px solid #383b40; }
.number { font: .875rem ui-monospace, monospace; color: #89929f; }
h2 { font-size: 1.125rem; font-weight: 600; margin: 24px 0 12px; }
article p { font-size: 1rem; line-height: 1.65; color: #bcc1ca; margin: 0; }
code { color: #a5f3cd; font-size: .95em; }
footer { border-top: 1px solid #383b40; padding-block: 28px; display: flex; gap: 28px; font-size: .875rem; color: #a5acb7; }
footer span { margin-right: auto; }
@media (max-width: 700px) { header, main, footer { width: calc(100% - 40px); } header { flex-wrap: wrap; padding-block: 24px; } nav { flex-wrap: wrap; gap: 20px; } .intro { padding-block: 64px; } h1 { letter-spacing: -.04em; } .summary { font-size: 1.125rem; } .features { grid-template-columns: 1fr; margin-bottom: 48px; } article, article + article { padding: 26px 0; border-left: 0; } article + article { border-top: 1px solid #383b40; } h2 { margin-top: 16px; } footer { flex-wrap: wrap; gap: 20px; } }