@font-face{font-family:Roboto;font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/Roboto-Regular.woff2') format('woff2')}
@font-face{font-family:Roboto;font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/Roboto-SemiBold.woff2') format('woff2')}
@font-face{font-family:Roboto;font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/Roboto-Bold.woff2') format('woff2')}

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:transparent}
body{font-family:Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  color:#292929;line-height:1.5;padding:16px;-webkit-font-smoothing:antialiased}
.wrap{max-width:760px;margin:0 auto}
.cc{background:#f6f8fb;border:1px solid #e7ebf2;border-radius:16px;padding:20px 22px;text-align:center}
.cc-title{font-size:18px;font-weight:700;letter-spacing:-.2px}
.cc-sub{font-size:13.5px;color:#5f6470;margin-top:6px;max-width:560px;margin-left:auto;margin-right:auto}
.cc-btns{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-top:18px}
.cc-btn{display:inline-flex;line-height:0;border-radius:16px;overflow:hidden;
  box-shadow:0 3px 10px rgba(20,33,62,.13);transition:transform .12s, box-shadow .12s}
.cc-btn img{width:58px;height:58px;display:block;border-radius:16px}
.cc-btn:hover{transform:translateY(-3px);box-shadow:0 9px 20px rgba(20,33,62,.22)}
.cc-btn:active{transform:translateY(-1px)}

@media(max-width:480px){
  .cc{padding:18px 16px}
  .cc-btn img{width:54px;height:54px}
}