* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "PingFang TC", "Helvetica Neue", sans-serif;
  color: #1d1d1f; -webkit-font-smoothing: antialiased;
  background: radial-gradient(1100px 520px at 50% -8%, #e3eeff 0%, #fff 62%);
  display: flex; flex-direction: column; min-height: 100vh;
}
.gate { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 22px; }
.gate-icon { width: 72px; height: 72px; border-radius: 17px; box-shadow: 0 10px 30px rgba(0,113,227,.25); margin-bottom: 26px; animation: rise .8s cubic-bezier(.2,.7,.2,1) both; }
.gate-eyebrow { font-size: 14px; font-weight: 600; color: #0071e3; animation: rise .8s .05s cubic-bezier(.2,.7,.2,1) both; }
.gate-title { font-size: clamp(56px, 12vw, 96px); font-weight: 700; letter-spacing: -.04em; line-height: 1.05; margin-top: 6px;
  background: linear-gradient(180deg, #1d1d1f 30%, #4b4b52); -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: rise .8s .1s cubic-bezier(.2,.7,.2,1) both; }
.gate-sub { font-size: 19px; color: #6e6e73; margin-top: 14px; animation: rise .8s .15s cubic-bezier(.2,.7,.2,1) both; }

.gate-form { width: 100%; max-width: 380px; margin-top: 40px; animation: rise .8s .2s cubic-bezier(.2,.7,.2,1) both; }
.field { position: relative; display: flex; align-items: center; background: rgba(255,255,255,.8); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid #d2d2d7; border-radius: 16px; transition: border-color .2s, box-shadow .2s; }
.field:focus-within { border-color: #0071e3; box-shadow: 0 0 0 4px rgba(0,113,227,.15); }
.field input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font: inherit; font-size: 21px; letter-spacing: .06em;
  padding: 17px 20px; color: #1d1d1f; text-transform: uppercase; }
.field input::placeholder { color: #a1a1a6; letter-spacing: 0; text-transform: none; }
.go { width: 40px; height: 40px; margin-right: 9px; border-radius: 50%; border: 0; cursor: pointer; background: #0071e3; display: grid; place-items: center; transition: background .2s, opacity .2s, transform .2s; }
.go:hover { background: #0077ed; }
.go:disabled { opacity: .35; cursor: default; }
.go svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.go.loading svg { animation: spin .9s linear infinite; }
.hint { font-size: 14px; color: #86868b; margin-top: 14px; min-height: 20px; transition: color .2s; }
.hint.error { color: #e30000; }
.hint.ok { color: #1a8a3a; }
.field.shake { animation: shake .42s cubic-bezier(.36,.07,.19,.97); border-color: #e30000; }

.gate-foot { text-align: center; font-size: 12px; color: #86868b; padding: 24px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes shake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(3px); } 30%, 50%, 70% { transform: translateX(-6px); } 40%, 60% { transform: translateX(6px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }