:root { color-scheme: dark; font-family: Inter, "Segoe UI", system-ui, sans-serif; background: #070b25; color: #f7f9ff; }
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; background: #070b25 url("download-art.webp") center top / cover fixed no-repeat; }
.skip-link { position: fixed; z-index: 99; top: 12px; left: 12px; padding: 9px 12px; border-radius: 10px; color: #03151d; background: #87f6ff; transform: translateY(-160%); transition: transform 160ms ease; }
.skip-link:focus { transform: translateY(0); }
body::before { content: ""; position: fixed; inset: 0; background: linear-gradient(115deg, rgba(7, 11, 37, .9), rgba(7, 11, 37, .52) 55%, rgba(7, 11, 37, .9)); pointer-events: none; }
main { position: relative; width: min(1060px, calc(100% - 32px)); margin: 0 auto; padding: 34px 0 56px; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.topbar-tools { display: flex; align-items: center; gap: 18px; }
.brand { display: inline-flex; gap: 11px; align-items: center; color: #fff; text-decoration: none; font-weight: 850; letter-spacing: .12em; }
.brand img { width: 40px; height: 40px; border-radius: 13px; box-shadow: 0 8px 28px rgba(96, 114, 255, .45); }
.language-select { display: inline-flex; align-items: center; gap: 8px; color: #b6c5e9; font-size: 12px; }
.language-select select { max-width: 150px; padding: 7px 26px 7px 9px; border: 1px solid rgba(181, 206, 255, .22); border-radius: 9px; color: #eff5ff; background: #101b45; font: inherit; }
.back { color: #b6c5e9; text-decoration: none; font-size: 14px; }
.back:hover, .back:focus-visible { color: #fff; }
.panel { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr); gap: 34px; align-items: stretch; margin-top: 68px; }
.intro, .progress-card { border: 1px solid rgba(218, 228, 255, .18); border-radius: 28px; background: rgba(9, 17, 52, .73); box-shadow: 0 30px 90px rgba(0, 0, 0, .28); backdrop-filter: blur(14px); }
.intro { padding: clamp(28px, 5vw, 58px); }
.eyebrow { margin: 0 0 15px; color: #8fb0ff; font-size: 12px; font-weight: 850; letter-spacing: .17em; text-transform: uppercase; }
h1 { max-width: 620px; margin: 0 0 22px; font-size: clamp(38px, 6vw, 74px); line-height: 1.02; letter-spacing: -.055em; }
h1 em { color: #9ca7ff; font-style: normal; }
.lead { max-width: 580px; margin: 0; color: #b7c4e5; font-size: 18px; line-height: 1.6; }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 34px; }
.card { padding: 16px; border: 1px solid rgba(218, 228, 255, .12); border-radius: 17px; background: rgba(255, 255, 255, .055); }
.card strong, .card span { display: block; }
.card strong { font-size: 14px; }
.card span { margin-top: 4px; color: #9eafd4; font-size: 12px; }
.progress-card { display: flex; flex-direction: column; justify-content: center; padding: 32px; }
.agent-badge { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.agent-badge img { width: 52px; height: 52px; border-radius: 17px; box-shadow: 0 0 0 7px rgba(123, 149, 255, .12); }
.agent-badge small, .agent-badge strong { display: block; }
.agent-badge small { color: #9eafd4; }
.agent-badge strong { font-size: 18px; }
.installer-filename { display: block; margin: -12px 0 8px; color: #8ea5d4; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; overflow-wrap: anywhere; }
.verification-details { display: grid; gap: 6px; margin: 0 0 17px; padding: 11px 12px; border: 1px solid rgba(218, 228, 255, .1); border-radius: 13px; background: rgba(0, 0, 0, .14); }
.verification-details div { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 8px; align-items: start; }
.verification-details dt { color: #8297c2; font-size: 11px; }
.verification-details dd { margin: 0; color: #dce6ff; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 10px; line-height: 1.45; overflow-wrap: anywhere; }
.download-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 70px; margin-top: 28px; padding: 15px 18px; border: 1px solid rgba(184, 204, 255, .55); border-radius: 16px; color: #061126; background: linear-gradient(115deg, #8ef5ff, #b9a5ff); box-shadow: 0 16px 34px rgba(79, 118, 255, .25); text-decoration: none; }
.download-cta:hover, .download-cta:focus-visible { filter: brightness(1.06); transform: translateY(-1px); }
.download-cta span, .download-cta b, .download-cta small { display: block; }
.download-cta b { font-size: 16px; }
.download-cta small { margin-top: 3px; color: rgba(6, 17, 38, .72); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; overflow-wrap: anywhere; }
.download-cta i { font-size: 22px; font-style: normal; }
.download-action__hint, .verification-note { margin: 12px 0 0; color: #aebee1; font-size: 12px; line-height: 1.5; }
.verification-note { margin-top: 18px; }
@media (max-width: 800px) { .panel { grid-template-columns: minmax(0, 1fr); margin-top: 42px; } .intro, .progress-card { min-width: 0; } h1 { font-size: 48px; } }
@media (max-width: 480px) { main { width: min(100% - 22px, 1060px); padding-top: 20px; } .topbar { align-items: flex-start; } .topbar-tools { flex-direction: column; align-items: flex-end; gap: 8px; } .back { display: none; } .intro, .progress-card { padding: 24px; border-radius: 22px; } h1 { font-size: clamp(38px, 12vw, 48px); } .cards { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .skip-link, .download-cta { transition: none; } }