:root{
  --navy:#0a2459;
  --sky:#0a92e2;
  --sky-dk:#0a7fd0;
  --ice:#eaf6fe;
  --ink-soft:#1d3a72;
}
*{box-sizing:border-box;margin:0;padding:0}
html{height:100%}
body{
  height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;position:relative;
  font-family:Montserrat,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--navy);text-align:center;overflow-x:hidden;
  background:#cfe8f8 url(bg.jpg) center bottom/cover no-repeat fixed;
}
body::before{ /* soft glow behind the copy, keeps text readable on any crop */
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 55% 60% at 50% 38%,rgba(255,255,255,.55),rgba(255,255,255,0) 70%);
}
.wrap{flex:1;display:flex;flex-direction:column;align-items:center;padding:clamp(16px,7vh,80px) 16px 0}

.logo{width:min(370px,74vw,36vh);height:auto;display:block}

.kicker{
  margin-top:clamp(10px,3.6vh,38px);
  font-size:clamp(12px,1.9vw,19px);font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft);
}
.kicker span{padding:0 .2em}

h1{
  margin-top:clamp(8px,2.2vh,24px);
  font-size:clamp(34px,min(8.4vw,10vh),104px);font-weight:900;line-height:1;letter-spacing:-.01em;text-transform:uppercase;
}
h1 em{font-style:normal;color:var(--sky)}

.sub{
  margin-top:clamp(6px,1.6vh,18px);
  font-size:clamp(11px,1.55vw,16px);font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);
}

.usp{list-style:none;display:flex;justify-content:center;margin-top:clamp(14px,4vh,44px)}
.usp li{
  display:flex;flex-direction:column;align-items:center;gap:clamp(6px,1.2vh,12px);
  width:clamp(96px,15vw,180px);
  font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
}
.usp li+li{border-left:1px solid rgba(10,36,89,.25)}
.ico{
  width:clamp(44px,6.5vh,62px);height:clamp(44px,6.5vh,62px);border-radius:50%;display:grid;place-items:center;
  border:2px solid var(--sky);background:rgba(255,255,255,.55);color:var(--navy);
}
.ico svg{width:48%;height:48%;fill:currentColor}
.ico svg[fill=none]{fill:none}

.notify{
  margin-top:clamp(14px,4vh,40px);
  display:flex;gap:12px;width:min(700px,100%);padding:14px;
  border-radius:18px;background:rgba(255,255,255,.45);
  box-shadow:0 10px 40px rgba(10,60,130,.12);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.field{
  flex:1;display:flex;align-items:center;gap:14px;padding:0 20px;
  background:#fff;border-radius:12px;min-width:0;
}
.field svg{width:26px;height:26px;flex:none;color:var(--navy)}
.field input{
  flex:1;min-width:0;height:54px;border:0;outline:0;background:none;
  font:500 16px Montserrat,system-ui,sans-serif;color:var(--navy);
}
.field input::placeholder{color:#7e8aa3}
.field:focus-within{box-shadow:0 0 0 3px rgba(10,146,226,.35)}
.notify button{
  display:flex;align-items:center;justify-content:center;gap:12px;
  padding:0 28px;height:54px;border:0;border-radius:12px;cursor:pointer;
  font:800 15px Montserrat,system-ui,sans-serif;letter-spacing:.03em;text-transform:uppercase;color:#fff;
  background:linear-gradient(180deg,#1aa0ec,var(--sky-dk));
  box-shadow:0 6px 18px rgba(10,127,208,.35);transition:transform .15s,box-shadow .15s;
}
.notify button:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(10,127,208,.45)}
.notify button svg{width:18px;height:18px}
.hp,.sr{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.note{
  margin-top:clamp(14px,4vh,40px);padding:16px 24px;border-radius:14px;max-width:700px;
  font-weight:600;font-size:15px;background:rgba(255,255,255,.75);
}
.note.ok{color:#0a6b3c}
.note.err{color:#b4232c;margin-bottom:-16px}

.foot{position:absolute;left:0;right:0;bottom:0;padding:12px;font-size:13px;font-weight:600;color:#fff;text-shadow:0 1px 6px rgba(10,36,89,.6)}

@media (max-width:640px){
  body{background:linear-gradient(180deg,#d4eafa 0%,#e6f3fd 40%,rgba(230,243,253,.85) 52%,rgba(230,243,253,0) 70%),url(bg-sm.jpg) center bottom/240% auto no-repeat,#e6f3fd}
  .kicker{letter-spacing:.14em}
  .sub{letter-spacing:.12em;line-height:1.6}
  .notify{flex-direction:column}
  .notify{gap:10px;padding:12px}
  .field input,.notify button{height:clamp(44px,6vh,52px)}
}