:root{
  --blue:#1d4f7c;
  --blue-dark:#143a5c;
  --gold:#c9a24b;
  --cream:#faf6ea;
  --ink:#1f2a37;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  color:var(--ink);
  background:#fbf9e6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
#bg{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}

.wrap{
  position:relative;z-index:1;
  min-height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding:32px 20px 24px;
}

.logo-box{
  position:relative;width:min(440px,88vw);aspect-ratio:1/1;margin:-60px 0 -16px;
  opacity:0;transform:scale(.92);animation:logoin 1.2s cubic-bezier(.2,.8,.2,1) .2s forwards, float 6s ease-in-out 1.6s infinite;
  -webkit-mask-image:radial-gradient(circle closest-side,#000 86%,transparent 98%);
          mask-image:radial-gradient(circle closest-side,#000 86%,transparent 98%);
}
.logo{width:100%;height:100%;display:block}
.shine{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.65) 50%,transparent 60%);
  background-size:250% 100%;background-position:150% 0;
  mix-blend-mode:soft-light;
  animation:shine 5s ease-in-out 2.2s infinite;
}

.badge{
  margin-top:8px;
  display:inline-block;
  padding:8px 22px;
  border:1.5px solid var(--gold);
  border-radius:999px;
  font-weight:700;font-size:.85rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--blue);background:rgba(255,255,255,.6);
  opacity:0;animation:up .8s ease-out 1.4s forwards, glow 3s ease-in-out 2.4s infinite;
}
.lead{
  margin-top:18px;max-width:560px;
  font-size:clamp(.95rem,2.4vw,1.1rem);line-height:1.7;color:#44505e;
  opacity:0;animation:up .8s ease-out 1.7s forwards;
}

.notify{
  margin-top:30px;width:100%;max-width:480px;
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  opacity:0;animation:up .8s ease-out 2s forwards;
}
.notify input[type=email]{
  flex:1 1 240px;padding:14px 18px;
  border:1.5px solid #d6cdb4;border-radius:999px;
  font:inherit;font-size:.95rem;background:#fff;color:var(--ink);outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.notify input[type=email]:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(29,79,124,.15)}
.notify button{
  padding:14px 28px;border:0;border-radius:999px;cursor:pointer;
  font:inherit;font-weight:700;font-size:.95rem;letter-spacing:.04em;
  color:#fff;background:var(--blue);
  transition:transform .15s, background .2s;
}
.notify button:hover{background:var(--blue-dark);transform:translateY(-1px)}
.notify button:disabled{opacity:.6;cursor:wait}
.msg{flex-basis:100%;min-height:1.3em;font-size:.88rem}
.msg.ok{color:#1b7a3d}.msg.err{color:#b3261e}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

footer{margin-top:34px;font-size:.78rem;color:#7a8594;opacity:0;animation:up .8s ease-out 2.3s forwards}

@keyframes up{to{opacity:1;transform:translateY(0)}}
@keyframes logoin{to{opacity:1;transform:scale(1)}}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes shine{0%,55%{background-position:150% 0}100%{background-position:-50% 0}}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 rgba(201,162,75,.0)}50%{box-shadow:0 0 0 8px rgba(201,162,75,.18)}}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .logo-box,.badge,.lead,.notify,footer{opacity:1!important;transform:none!important}
}