:root{
  --bg:#070a14; --panel:rgba(16,23,41,.55); --line:rgba(255,255,255,.10);
  --text:#e6ebff; --muted:#9aa6bf; --radius:18px; --shadow:0 20px 60px rgba(0,0,0,.55);
}
*{box-sizing:border-box}
html,body{height:100%}
body{ margin:0; color:var(--text); font:15px/1.5 Inter,system-ui,Segoe UI,Arial,sans-serif;
  display:grid; place-items:center; background: var(--bg); overflow:hidden; animation: fadeIn 420ms cubic-bezier(.2,.8,.2,1);}
@keyframes fadeIn { from { opacity:0; transform: translateY(6px) } to { opacity:1; transform:none } }

/* ===== Animated background with entrance PULSE ===== */
.bg-anim{ position:fixed; inset:0; overflow:hidden; z-index:-1; }
.blob{
  position:absolute; width:46vw; height:46vw; border-radius:50%;
  filter: blur(85px) saturate(140%); opacity:.92; transform:translate(-50%,-50%);
  will-change: transform, opacity, filter;
}
.b1{ left:15%; top:0%;  background: radial-gradient(closest-side, #2563eb, rgba(37,99,235,0)); animation: drift1 22s ease-in-out infinite, pulseIn 1200ms ease-out 1; }
.b2{ left:85%; top:100%; background: radial-gradient(closest-side, #14b8a6, rgba(20,184,166,0)); animation: drift2 26s ease-in-out infinite, pulseIn 1200ms ease-out 1; }
.b3{ left:50%; top:50%;  background: radial-gradient(closest-side, #8b5cf6, rgba(139,92,246,0));  animation: drift3 28s ease-in-out infinite, pulseIn 1200ms ease-out 1; opacity:.75; }

@keyframes drift1 { 0%,100%{ transform:translate(-50%,-50%) scale(1) } 50%{ transform:translate(-42%,-40%) scale(1.18) } }
@keyframes drift2 { 0%,100%{ transform:translate(-50%,-50%) scale(1) } 50%{ transform:translate(-62%,-60%) scale(1.12) } }
@keyframes drift3 { 0%,100%{ transform:translate(-50%,-50%) scale(1) } 50%{ transform:translate(-48%,-40%) scale(1.2) } }
/* Пульс при входе: небольшой «вздох» и затухание */
@keyframes pulseIn { 0%{ filter: blur(110px) saturate(180%); transform:translate(-50%,-50%) scale(1.25); opacity:.0; }
  40%{ filter: blur(90px)  saturate(180%); transform:translate(-50%,-50%) scale(1.05); opacity:.9; }
  70%{ filter: blur(80px)  saturate(160%); transform:translate(-50%,-50%) scale(.98);  opacity:1; }
  100%{ filter: blur(85px)  saturate(140%); transform:translate(-50%,-50%) scale(1);    opacity:.92; } }

.grain{
  position:absolute; inset:-20%; pointer-events:none;
  background:
    radial-gradient(1200px 420px at 15% -10%, rgba(37,99,235,.24), transparent 55%),
    radial-gradient(1200px 420px at 85% 110%, rgba(16,185,129,.16), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 35%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0, rgba(255,255,255,.02) 2px, transparent 2px, transparent 4px);
  mix-blend-mode: screen; animation: pulse 8s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{ opacity:.85 } 50%{ opacity:1 } }

/* ===== Layout ===== */
.wrap{ width:min(520px,94vw); padding:24px; }
.hero{
  margin:0 0 10px; text-align:center; letter-spacing:.14em;
  font-size: clamp(26px, 6.2vw, 44px); font-weight: 900; line-height: 1;
  background: linear-gradient(180deg,#e6ebff 0%, #b6c4ff 70%, #8aa0ff 100%); -webkit-background-clip: text; background-clip:text; color:transparent;
  text-shadow: 0 16px 40px rgba(65,105,225,.35);
}
.card{ background: var(--panel); border:1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding:28px 26px; text-align:center; backdrop-filter: blur(12px);
  position: relative; overflow:hidden; animation: cardIn 420ms cubic-bezier(.2,.8,.2,1); }
@keyframes cardIn { from { opacity:0; transform: translateY(8px) } to { opacity:1; transform:none } }
.card::before{ content:''; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  background: radial-gradient(1200px 1200px at 0% 0%, rgba(255,255,255,.08), transparent 50%); }

form{ display:grid; gap:12px; text-align:left }
label span{ display:block; font-size:12px; color:var(--muted); margin-bottom:6px }
input{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--line);
  background:rgba(255,255,255,.03); color:var(--text); outline:none; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
  backdrop-filter: blur(4px);
}
input:focus{ border-color:#2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.22), inset 0 0 0 1px rgba(255,255,255,.08); transform: translateZ(0);}
button{
  margin-top:6px; padding:12px 16px; border-radius:12px; border:0; cursor:pointer; font-weight:800; color:#fff;
  background: linear-gradient(180deg,#2f7ae5,#1a73e8); box-shadow: 0 16px 32px rgba(37,99,235,.35); transition: transform .12s ease, box-shadow .2s ease;
}
button:hover{ transform: translateY(-1px); box-shadow: 0 22px 44px rgba(37,99,235,.42); }
button:active{ transform: translateY(0); }
button:disabled{ opacity:.7; cursor:not-allowed }
.error{ margin-top:8px; color:#ffb4b4; font-size:13px }
.brand{ color:var(--muted); text-align:center; margin-top:14px; font-size:12px }

@media (prefers-reduced-motion: reduce){ .blob, .grain, .card, body { animation: none !important; } }