:root{
  --space: clamp(12px, 3vw, 20px);
  --font: clamp(16px, 2.8vw, 18px);
  --blue-700: #0a2a3a;
  --blue-500: #165a7a;
  --blue-100: #e6f3f9;
  --radius: 16px;
  --shadow: 0 10px 22px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html{font-size:100%}
body{
  margin:0; font-family: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: var(--font); line-height:1.5; color:#0b1720; background:#fff;
  padding-bottom: calc(env(safe-area-inset-bottom) + var(--space));
  -webkit-text-size-adjust:100%;
}
.container{max-width: 820px; margin:0 auto; padding: 0 var(--space);}
a{color:var(--blue-500); text-decoration:none}
.brand{text-decoration:none; color:inherit; font-weight:700; letter-spacing:.02em; text-transform:uppercase}
.btn{
  display:flex; justify-content:center; align-items:center; gap:10px; width:100%; max-width:100%;
  padding:14px 16px; border-radius:14px; border:0; cursor:pointer; font-weight:700;
  background:var(--blue-500); color:#fff; box-shadow: var(--shadow);
}
.btn:active{transform:translateY(1px)}
:where(a, button, input, textarea, select):focus-visible{outline:3px solid #1e90ff; outline-offset:2px}
footer{opacity:.85; font-size:.9em; margin: clamp(20px, 4vw, 32px) 0}
footer .links{display:flex; gap:14px; flex-wrap:wrap}