/* 2families — цвета из брендбука */
:root{
  --white:#FFFFFF;      /* RGB 255/255/255 · CMYK 0/0/0/0 */
  --graphite:#232323;   /* RGB 35/35/35   · CMYK 74/64/59/77 */
  --orange:#D55930;     /* RGB 213/89/48  · CMYK 0/80/95/0 */
  --graphite-2:#2E2E2E;
  --line:rgba(255,255,255,.14);
  --muted:rgba(255,255,255,.62);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--graphite);color:var(--white);
  min-height:100vh;min-height:100dvh;
  -webkit-font-smoothing:antialiased;
}
.page{max-width:560px;margin:0 auto;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}

/* Верхний блок — логотип на оранжевом (вариант 3 из брендбука) */
.hero{
  background:var(--orange);color:var(--graphite);
  padding:clamp(40px,11vw,64px) 24px clamp(28px,8vw,40px);
}
.hero__logo{display:block;width:min(78%,320px);height:auto}
.hero__lead{
  margin-top:clamp(28px,8vw,40px);
  font-weight:700;font-size:clamp(20px,5.6vw,26px);line-height:1.2;letter-spacing:-.01em;
}

/* Кнопки соцсетей */
.links{display:flex;flex-direction:column;padding:8px 0}
.link{
  position:relative;display:flex;align-items:center;gap:16px;
  padding:22px 24px;min-height:84px;
  color:var(--white);text-decoration:none;
  border-bottom:1px solid var(--line);
  transition:background-color .18s ease,color .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.link__num{font-weight:600;font-size:13px;color:var(--orange);width:24px;flex:none;font-variant-numeric:tabular-nums;transition:color .18s ease}
.link__text{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.link__name{font-weight:800;font-size:clamp(22px,6.4vw,28px);line-height:1.05;letter-spacing:-.015em}
.link__name sup{font-size:.5em;font-weight:600;vertical-align:super;margin-left:2px}
.link__sub{font-weight:500;font-size:14px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color .18s ease}
.link__arrow{
  flex:none;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;background:var(--graphite-2);color:var(--orange);
  transition:background-color .18s ease,color .18s ease,transform .18s ease;
}
.link__arrow svg{width:20px;height:20px}

.link:hover,.link:focus-visible,.link.is-pressed{background:var(--orange)}
.link:hover .link__num,.link:focus-visible .link__num,.link.is-pressed .link__num{color:var(--graphite)}
.link:hover .link__sub,.link:focus-visible .link__sub,.link.is-pressed .link__sub{color:rgba(35,35,35,.8)}
.link:hover .link__arrow,.link:focus-visible .link__arrow,.link.is-pressed .link__arrow{background:var(--graphite);color:var(--white);transform:rotate(45deg)}
.link:focus-visible{outline:3px solid var(--white);outline-offset:-3px}

/* Подвал */
.foot{margin-top:auto;padding:36px 24px calc(28px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:14px}
.foot__logo{width:56px;height:auto;opacity:.9}
.foot__note{font-size:11px;line-height:1.45;color:var(--muted);font-weight:500;max-width:420px}
.foot__copy{font-size:12px;color:var(--muted);font-weight:600}

@media (min-width:600px){
  body{padding:40px 0}
  .page{min-height:auto;border-radius:4px;overflow:hidden;box-shadow:0 0 0 1px var(--line)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}