@font-face {
font-family: Manrope;
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("manrope-700.ttf") format("truetype");
}

:root {
color-scheme: dark;
--bg: #070b0f;
--text: #edf3f1;
--mint: #6ee7c5;
--ink: #06201a;
}

* { box-sizing: border-box; }

html, body {
margin: 0;
min-height: 100%;
background: var(--bg);
color: var(--text);
font-family: Manrope, "Segoe UI Variable", "Segoe UI", sans-serif;
}

::selection { background: var(--mint); color: var(--ink); }

.brand {
position: fixed;
top: 28px;
left: 32px;
display: flex;
align-items: center;
gap: 12px;
font-size: 22px;
font-weight: 700;
letter-spacing: -0.03em;
}

.brand img { width: 36px; height: 36px; }

main {
min-height: 100vh;
display: grid;
place-items: center;
}

.download {
height: 56px;
display: inline-flex;
align-items: center;
padding: 0 28px;
border-radius: 14px;
background: var(--mint);
color: var(--ink);
font-size: 16px;
font-weight: 700;
letter-spacing: -0.02em;
text-decoration: none;
box-shadow: 0 16px 32px -18px var(--mint);
transition: transform 180ms ease, filter 180ms ease;
}

.download:hover { transform: translateY(-2px); filter: brightness(1.06); }
.download:active { transform: translateY(0) scale(0.98); }
.download:focus-visible { outline: 3px solid var(--text); outline-offset: 4px; }

@media (max-width: 640px) {
.brand { top: 20px; left: 20px; }
}