@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/golos-1.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/golos-3.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root { color-scheme: dark; --gold: #f6bf4c; --muted: #a6a39d; }
* { box-sizing: border-box; }
body {
  min-width: 280px;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  margin: 0;
  background: radial-gradient(ellipse at 50% 20%, #262217 0, #171613 35%, #121212 68%);
  color: #f5f2eb;
  font-family: 'Golos Text', sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
a:focus-visible { outline: 3px solid var(--gold); outline-offset: 6px; }
.header, .footer { width: min(1120px, calc(100% - 80px)); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; }
.header { min-height: 96px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; letter-spacing: -.6px; text-decoration: none; }
.brand img { display: block; border: 1px solid #33312a; border-radius: 9px; }
.header-note { color: #8d8a81; font-size: 12px; }
main { flex: 1; display: grid; place-items: center; padding: 34px 24px 48px; }
.activation { width: min(100%, 470px); text-align: center; }
.course-badge { width: fit-content; margin: 0 auto 28px; display: flex; align-items: center; gap: 8px; padding: 8px 13px; border: 1px solid #5a4c2d; border-radius: 30px; background: #f6bf4c0a; color: #ebc779; font-size: 12px; }
.course-badge span { width: 6px; height: 6px; background: var(--gold); border-radius: 50%; }
.eyebrow { margin: 0 0 12px; color: #aaa18d; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(34px, 5.2vw, 52px); font-weight: 700; line-height: 1.12; letter-spacing: -.065em; }
.title-dot { color: var(--gold); }
.intro { max-width: 360px; margin: 19px auto 30px; color: #bdb8ae; font-size: 15px; line-height: 1.6; text-wrap: pretty; }
.messengers { display: grid; gap: 12px; text-align: left; }
.messenger { --accent: #fff; min-height: 80px; display: flex; align-items: center; gap: 16px; padding: 16px 20px; border: 1px solid #ffffff24; border-radius: 18px; text-decoration: none; box-shadow: 0 6px 20px #0000001f, inset 0 1px #ffffff0d; transition: transform .18s ease, filter .18s ease, border-color .18s ease; }
.messenger:hover { transform: translateY(-2px); filter: brightness(1.12); border-color: #ffffff60; }
.messenger:active { transform: translateY(0); }
.telegram { background: linear-gradient(115deg, #188abc, #167fab); }
.max { background: linear-gradient(112deg, #9c35be, #6739c1 56%, #335cc2); }
.vk { background: linear-gradient(115deg, #296ccd, #1c5fbf); }
.messenger-icon { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid #ffffff22; border-radius: 13px; background: #ffffff0d; }
.messenger-icon img { display: block; object-fit: contain; }
.messenger-copy { display: grid; gap: 4px; }
.button-label { color: #fff; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: -.02em; }
.button-note { color: #ffffffe0; font-size: 11px; line-height: 1.4; }
.arrow { margin-left: auto; color: #ffffffe6; font-size: 25px; font-family: sans-serif; }
.hint { max-width: 350px; margin: 24px auto 0; color: #aaa59a; font-size: 12px; line-height: 1.65; }
.hint span { margin-right: 4px; color: var(--gold); }
.footer { min-height: 70px; gap: 16px; border-top: 1px solid #ffffff0c; color: #8b877f; font-size: 11px; }
.footer span:first-child { color: #a29c90; }
@media (max-width: 600px) {
  .header, .footer { width: calc(100% - 40px); }
  .header { min-height: 76px; }
  .header-note { display: none; }
  main { padding: 26px 20px 38px; }
  .course-badge { margin-bottom: 24px; }
  .intro { margin: 16px auto 26px; font-size: 14px; }
  .messenger { min-height: 76px; padding: 14px 16px; gap: 13px; border-radius: 16px; }
  .button-label { font-size: 14px; }
  .footer { min-height: 62px; font-size: 10px; }
}
@media (max-width: 350px) {
  main { padding-inline: 14px; }
  h1 { font-size: 32px; }
  .messenger { gap: 10px; padding-inline: 12px; }
  .messenger-icon { width: 36px; height: 36px; }
  .button-label { font-size: 12px; }
  .footer span:last-child { max-width: 150px; text-align: right; }
}
@media (prefers-reduced-motion: reduce) { .messenger { transition: none; } }