@font-face {
  font-family: Manrope;
  src: url('/assets/fonts/manrope-variable.ttf') format('truetype');
  font-weight: 200 800;
  font-display: swap;
}
:root { font-family: Manrope, Arial, sans-serif; color: #363636; background: #fafafa; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; display: flex; flex-direction: column; }
a { color: inherit; text-underline-offset: 4px; }
a:focus-visible { outline: 3px solid #606060; outline-offset: 6px; }
.header { width: 100%; max-width: 1160px; margin: 0 auto; padding: 30px 36px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { font-size: 18px; font-weight: 750; letter-spacing: -.5px; text-decoration: none; }
.support { font-size: 14px; text-decoration: none; }
.support:hover { text-decoration: underline; }
main { width: 100%; max-width: 812px; margin: auto; padding: 66px 32px 90px; }
h1 { margin: 0 0 40px; text-align: center; font-size: clamp(32px, 5vw, 44px); line-height: 1.2; font-weight: 700; letter-spacing: -1.7px; }
.apps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; padding: 0; margin: 0; gap: 18px; }
.app { min-height: 132px; height: 100%; display: flex; align-items: center; gap: 20px; padding: 28px 24px; border: 1px solid #e4e4e4; border-radius: 20px; background: #fff; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.app:hover { border-color: #a0a0a0; box-shadow: 0 6px 24px #38383810; }
.app img { width: 64px; height: 64px; flex: none; border-radius: 14px; }
.app-name { font-size: 17px; font-weight: 650; line-height: 1.5; }
.arrow { margin-left: auto; color: #898989; font-size: 22px; }
.other { text-align: center; margin: 36px 0 0; font-size: 14px; color: #6c6c6c; }
footer { padding: 24px 24px 30px; text-align: center; font-size: 12px; color: #7b7b7b; }
@media (max-width: 600px) {
  .header { padding: 24px; }
  main { padding: 38px 24px 54px; max-width: 420px; }
  h1 { margin-bottom: 30px; }
  .apps { grid-template-columns: 1fr; gap: 12px; }
  .app { min-height: 100px; padding: 19px 20px; gap: 18px; border-radius: 16px; }
  .app img { width: 56px; height: 56px; border-radius: 12px; }
  .app-name { font-size: 16px; }
  .other { margin-top: 30px; }
}
@media (prefers-reduced-motion: reduce) { .app { transition: none; } }

.header-controls { display: flex; align-items: center; gap: 24px; }
.language-control { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.language-control[hidden] { display: none; }
.language-control select { font: inherit; color: inherit; background: #fff; border: 1px solid #d8d8d8; border-radius: 8px; padding: 8px; max-width: 145px; }
.language-control select:focus-visible { outline: 3px solid #606060; outline-offset: 3px; }
h1 { margin-bottom: 14px; }
.subtitle { margin: 0 auto 36px; max-width: 580px; text-align: center; font-size: 15px; line-height: 1.7; color: #6c6c6c; text-wrap: pretty; }
@media (max-width: 600px) {
  .header { flex-wrap: wrap; gap: 16px; }
  .header-controls { gap: 16px; margin-left: auto; }
  .language-control > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .language-control select { max-width: 115px; }
  .subtitle { font-size: 14px; margin-bottom: 28px; }
}