*{box-sizing:border-box}
:root{
  --navy:#0b316d;
  --navy-dark:#082858;
  --teal:#12b89c;
  --teal-dark:#0ca889;
  --ink:#263e63;
  --muted:#63748f;
  --pale:#f6f9fe;
  --line:#d9e1ed;
}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-width:320px;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  color:var(--ink);
  background:#f7f9fd;
}
.page-shell{
  min-height:calc(100vh - 108px);
  padding:34px 22px 0;
  display:flex;
  justify-content:center;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 12%,rgba(225,234,249,.48),transparent 33%),
    linear-gradient(180deg,#fbfcff 0%,#f7f9fd 72%,#edf3fb 100%);
}
.hero{width:min(1024px,100%);text-align:center}
.brand{margin:0 auto 14px}
.logo{display:block;width:430px;max-width:76%;height:auto;margin:0 auto}
h1{
  margin:12px 0 0;
  font-size:clamp(42px,6.4vw,82px);
  line-height:.98;
  letter-spacing:.01em;
  font-weight:800;
  color:var(--navy);
}
h1 strong{
  color:var(--teal);
  font-weight:800;
}
.headline-rule{
  width:300px;
  height:8px;
  margin:22px auto 25px;
  border-radius:999px;
  overflow:hidden;
  background:linear-gradient(90deg,var(--navy) 0 50%,var(--teal) 50% 100%);
}
.lead{
  margin:0 0 13px;
  font-size:clamp(20px,2.25vw,29px);
  font-weight:800;
  color:var(--navy);
}
.description{
  margin:0 auto;
  max-width:720px;
  font-size:clamp(16px,1.65vw,21px);
  line-height:1.72;
  color:#53647f;
}
.construction{
  width:min(760px,100%);
  margin:20px auto 4px;
}
.construction svg{display:block;width:100%;height:auto}
.notify h2{
  margin:0 0 20px;
  color:var(--navy);
  font-size:clamp(18px,2vw,24px);
  line-height:1.3;
}
.form-row{
  display:flex;
  width:min(640px,100%);
  margin:0 auto;
  gap:10px;
}
.form-row input{
  min-width:0;
  flex:1;
  height:62px;
  border:1.5px solid #d3dbe7;
  border-radius:12px;
  padding:0 21px;
  background:#fff;
  color:var(--ink);
  font:inherit;
  font-size:16px;
  outline:none;
  box-shadow:0 2px 7px rgba(30,57,98,.04);
}
.form-row input::placeholder{color:#8996a9}
.form-row input:focus{
  border-color:var(--teal);
  box-shadow:0 0 0 4px rgba(18,184,156,.12);
}
.form-row button{
  position:relative;
  width:168px;
  flex:0 0 168px;
  border:0;
  border-radius:12px;
  background:linear-gradient(135deg,#15bfa3,#0cae91);
  color:#fff;
  font-weight:800;
  letter-spacing:.01em;
  font-size:15px;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(12,174,145,.18);
  transition:transform .15s ease,filter .15s ease;
}
.form-row button:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.03)}
.form-row button:disabled{cursor:wait;opacity:.88}
.button-spinner{
  display:none;
  width:17px;height:17px;
  margin-left:8px;
  vertical-align:-3px;
  border:2px solid rgba(255,255,255,.45);
  border-top-color:#fff;
  border-radius:50%;
  animation:spin .75s linear infinite;
}
button.loading .button-spinner{display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.form-message{
  min-height:24px;
  margin:10px auto 0;
  font-size:14px;
  font-weight:600;
}
.form-message.success{color:#07856e}
.form-message.error{color:#c33b49}
.features{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
  width:min(920px,100%);
  margin:23px auto 46px;
}
.feature{min-width:0}
.feature-icon{
  width:52px;height:52px;
  margin:0 auto 11px;
}
.feature-icon svg{
  width:100%;height:100%;
  fill:none;
  stroke:var(--navy);
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.feature:nth-child(2) svg,.feature:nth-child(4) svg{stroke:var(--teal)}
.feature h3{
  margin:0 0 7px;
  font-size:15px;
  color:var(--navy);
}
.feature p{
  margin:0;
  font-size:13px;
  line-height:1.55;
  color:#667690;
}
.site-footer{
  min-height:108px;
  background:#edf3fb;
  border-top:1px solid rgba(183,201,228,.45);
}
.footer-inner{
  width:min(1024px,calc(100% - 44px));
  min-height:108px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:25px;
  color:#203858;
  font-size:14px;
}
.footer-inner p{margin:0}
.email-link{justify-self:end;color:var(--navy);font-weight:700;text-decoration:none}
.email-link:hover{text-decoration:underline}
.socials{display:flex;align-items:center;gap:16px;justify-content:center}
.socials a{
  width:35px;height:35px;
  display:grid;place-items:center;
  border-radius:50%;
  background:var(--navy);
  color:#fff;
  text-decoration:none;
  font-size:18px;
  font-weight:800;
  transition:transform .15s ease,background .15s ease;
}
.socials a:hover{transform:translateY(-2px);background:var(--teal)}
.socials a:nth-child(3){font-size:15px}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
@media (max-width:760px){
  .page-shell{padding:24px 16px 0}
  .logo{width:330px}
  .headline-rule{width:230px;height:6px;margin:17px auto 20px}
  .description{line-height:1.6}
  .desktop-only{display:none}
  .construction{margin-top:12px}
  .form-row{flex-direction:column}
  .form-row button{height:58px;width:100%;flex-basis:auto}
  .features{grid-template-columns:repeat(2,1fr);gap:28px 12px;margin-bottom:38px}
  .footer-inner{
    grid-template-columns:1fr;
    justify-items:center;
    text-align:center;
    padding:24px 0;
    gap:18px;
  }
  .email-link{justify-self:auto}
}
@media (max-width:420px){
  h1{font-size:40px}
  .lead{font-size:20px}
  .features{grid-template-columns:1fr 1fr}
  .feature h3{font-size:14px}
  .feature p{font-size:12px}
}