/* Standalone subscribe landing — tapbox.ru/subscribe (DO NOT DELETE) */

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body.subscribe-page{
  min-height:100vh;min-height:100dvh;
  display:flex;align-items:center;justify-content:center;
  padding:28px 20px max(28px,env(safe-area-inset-bottom));
  font-family:Manrope,Helvetica,Arial,sans-serif;color:#fff;
  background:#000030;overflow-x:hidden;
}

.sp-bg{
  position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0
}
.sp-bg i{
  position:absolute;border-radius:50%;filter:blur(80px);opacity:.55;
  animation:sp-float 14s ease-in-out infinite
}
.sp-bg i:nth-child(1){width:420px;height:420px;background:#1c83e0;top:-120px;left:-80px}
.sp-bg i:nth-child(2){width:360px;height:360px;background:#1fc7a3;bottom:-100px;right:-60px;animation-delay:-4s}
.sp-bg i:nth-child(3){width:280px;height:280px;background:#2563eb;top:40%;left:55%;animation-delay:-8s;opacity:.35}
@keyframes sp-float{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(18px,-22px) scale(1.06)}
}

.sp-wrap{position:relative;z-index:1;width:min(560px,100%)}
.sp-card{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  border-radius:40px;
  padding:44px 36px 38px;
  text-align:center;
  box-shadow:0 40px 120px rgba(0,0,0,.35);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  animation:sp-card-in .55s cubic-bezier(.22,1,.36,1) both
}
@keyframes sp-card-in{
  from{opacity:0;transform:translateY(18px) scale(.97)}
  to{opacity:1;transform:none}
}

.sp-brand{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:28px;
  font-size:13px;font-weight:700;letter-spacing:.02em;color:rgba(255,255,255,.62)
}
.sp-brand-dot{
  width:8px;height:8px;border-radius:50%;
  background:linear-gradient(135deg,#1fc7a3,#1c83e0);flex-shrink:0
}
.sp-brand-link{color:inherit;text-decoration:none}
.sp-brand-link:hover{color:#fff}

.sp-title{
  margin:0 0 14px;font-size:clamp(28px,5vw,40px);font-weight:800;line-height:1.12;
  letter-spacing:-.02em;color:#fff
}
.sp-lead{
  margin:0 auto 22px;max-width:420px;font-size:17px;line-height:1.55;
  color:rgba(255,255,255,.68)
}

.sp-chips{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
  margin:0 0 28px;padding:0;list-style:none
}
.sp-chips li{
  padding:8px 14px;border-radius:999px;font-size:13px;font-weight:600;
  color:rgba(255,255,255,.78);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1)
}

.sp-form{
  display:flex;flex-direction:column;gap:12px;text-align:left
}
.sp-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.sp-label{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0
}
.sp-input{
  width:100%;box-sizing:border-box;
  border:1px solid rgba(255,255,255,.18);border-radius:14px;
  min-height:64px;padding:0 18px;
  font:inherit;font-size:17px;line-height:1.95;color:#fff;
  background:rgba(255,255,255,.06);
  caret-color:#7fc4f5;
  transition:border-color .2s,box-shadow .2s,background .2s
}
.sp-input::placeholder{color:rgba(255,255,255,.45)}
.sp-input:focus{
  outline:none;border-color:#3f9cdf;background:rgba(255,255,255,.09);
  box-shadow:0 0 0 4px rgba(63,156,223,.2)
}
.sp-input.is-invalid{
  border-color:#ff6b6b;background:rgba(255,107,107,.09)
}
.sp-input.is-invalid:focus{
  border-color:#ff6b6b;box-shadow:0 0 0 4px rgba(255,107,107,.18)
}

.sp-field--captcha{
  max-height:0;margin-top:-12px;opacity:0;overflow:hidden;
  transform:translateY(-8px);pointer-events:none;
  transition:max-height .34s ease,opacity .26s ease,
    transform .34s cubic-bezier(.22,1,.36,1),margin-top .34s ease
}
.sp-form:has(#subscribe-email:not(:placeholder-shown)) .sp-field--captcha{
  max-height:90px;margin-top:0;opacity:1;transform:none;pointer-events:auto
}
.sp-captcha{display:flex;align-items:center;gap:10px;width:100%}
.sp-captcha-q{
  flex-shrink:0;font-size:17px;font-weight:700;color:#fff;white-space:nowrap
}
.sp-captcha .sp-input{
  flex:1 1 auto;min-height:64px;width:auto
}

.sp-hp{
  position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none
}

.sp-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;min-height:64px;padding:0 44px;margin-top:4px;
  border:none;border-radius:14px;cursor:pointer;
  font:inherit;font-size:18px;font-weight:700;color:#fff;text-decoration:none;
  background:linear-gradient(90deg,#1aa789 0%,#186ebc 100%);
  box-shadow:0 14px 40px rgba(28,131,224,.32);
  transition:transform .15s ease,box-shadow .2s ease,opacity .2s
}
.sp-cta:hover{transform:translateY(-1px);box-shadow:0 18px 48px rgba(28,131,224,.42)}
.sp-cta:disabled{opacity:.55;cursor:default;transform:none;box-shadow:none}
.sp-cta.is-sending{opacity:.7;pointer-events:none}

.sp-consents{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.sp-check{
  display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:flex-start;
  cursor:pointer;font-size:13px;line-height:1.45;color:rgba(255,255,255,.55)
}
.sp-check-input{
  position:absolute;opacity:0;width:1px;height:1px;pointer-events:none
}
.sp-check-box{
  width:22px;height:22px;margin-top:1px;border-radius:7px;flex-shrink:0;
  border:1.5px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.05);
  transition:background .15s,border-color .15s,box-shadow .15s;
  position:relative
}
.sp-check-box::after{
  content:"";position:absolute;left:6px;top:3px;width:7px;height:11px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);
  transition:transform .15s
}
.sp-check-input:checked + .sp-check-box{
  background:linear-gradient(135deg,#1fc7a3,#1c83e0);border-color:transparent
}
.sp-check-input:checked + .sp-check-box::after{transform:rotate(45deg) scale(1)}
.sp-check-input.is-invalid + .sp-check-box{
  border-color:#ff6b6b;box-shadow:0 0 0 3px rgba(255,107,107,.2)
}
.sp-check-text a{
  color:#9ec5ff;text-decoration:underline;text-underline-offset:2px;
  transition:color .18s ease
}
.sp-check-text a:hover{color:#c8dfff}

.sp-msg{
  min-height:1.2em;margin:4px 0 0;font-size:14px;line-height:1.4;
  color:rgba(255,255,255,.55);text-align:center
}
.sp-msg--err{color:#ff6b6b}
.sp-msg--info{color:#9ec5ff}

.sp-done-view{text-align:center}
.sp-done-view[hidden],.sp-form-view[hidden]{display:none!important}
.sp-mark{
  width:92px;height:92px;margin:0 auto 26px;position:relative;
  animation:sp-mark-in .65s cubic-bezier(.22,1,.36,1) .08s both
}
@keyframes sp-mark-in{
  from{opacity:0;transform:scale(.72)}
  to{opacity:1;transform:none}
}
.sp-mark svg{display:block;width:100%;height:100%}
.sp-mark--ok{color:#1fc7a3}
.sp-mark-ring{
  position:absolute;inset:-10px;border-radius:50%;
  border:1px solid currentColor;opacity:.25;
  animation:sp-ring 2.4s ease-out infinite
}
@keyframes sp-ring{
  0%{transform:scale(.92);opacity:.35}
  70%{transform:scale(1.12);opacity:0}
  100%{transform:scale(1.12);opacity:0}
}
.sp-check-path{
  stroke-dasharray:48;stroke-dashoffset:48;
  animation:sp-draw .55s cubic-bezier(.22,1,.36,1) .4s forwards
}
@keyframes sp-draw{to{stroke-dashoffset:0}}

.sp-hint{margin:18px 0 0;font-size:13px;color:rgba(255,255,255,.42)}
.sp-hint-btn{
  border:none;background:none;padding:0;font:inherit;font-size:13px;cursor:pointer;
  color:rgba(255,255,255,.62);border-bottom:1px solid rgba(255,255,255,.22)
}
.sp-hint-btn:hover{color:#fff}

@media (max-width:520px){
  .sp-card{padding:34px 22px 30px;border-radius:32px}
  .sp-chips li{font-size:12px;padding:7px 12px}
  .sp-title{font-size:28px}
}

@media (prefers-reduced-motion:reduce){
  .sp-bg i,.sp-card,.sp-mark,.sp-mark-ring,.sp-check-path{animation:none!important}
  .sp-check-path{stroke-dashoffset:0}
  .sp-field--captcha{transition:none}
}