*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:#F4ECDD}
input{font-family:inherit}
::placeholder{color:#9AA2B0;opacity:1}

@keyframes avvy-drift{from{transform:translateX(-22vw)}to{transform:translateX(122vw)}}
@keyframes avvy-dash{to{background-position-x:60px}}
@keyframes avvy-travel{0%{left:4%}100%{left:96%}}
@keyframes avvy-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes avvy-pinbob{0%,100%{transform:rotate(-45deg) translate(0,0)}50%{transform:rotate(-45deg) translate(-3px,-3px)}}

/* page shell */
.page{
  position:relative;
  min-height:100vh;
  width:100%;
  overflow:hidden;
  background:linear-gradient(180deg,#FBF6EE 0%,#F5EDDF 46%,#EFE5D3 100%);
  font-family:'Nunito',sans-serif;
  color:#15243C;
  display:flex;
  flex-direction:column;
}

/* faint Australia map watermark */
.map-watermark{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-54%);
  width:min(1180px,118vw);
  height:auto;
  opacity:0.06;
  pointer-events:none;
  z-index:0;
}

/* drifting clouds */
.clouds{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
}
.cloud{
  position:absolute;
  left:0;
  filter:blur(6px);
}
.cloud-1{
  top:14%;
  width:280px;
  height:90px;
  background:radial-gradient(closest-side,rgba(255,255,255,0.85),rgba(255,255,255,0));
  filter:blur(6px);
  animation:avvy-drift 78s linear infinite;
}
.cloud-2{
  top:30%;
  width:200px;
  height:64px;
  background:radial-gradient(closest-side,rgba(255,255,255,0.7),rgba(255,255,255,0));
  filter:blur(5px);
  animation:avvy-drift 104s linear -30s infinite;
}
.cloud-3{
  top:62%;
  width:340px;
  height:104px;
  background:radial-gradient(closest-side,rgba(255,255,255,0.8),rgba(255,255,255,0));
  filter:blur(8px);
  animation:avvy-drift 120s linear -70s infinite;
}
.cloud-4{
  top:48%;
  width:160px;
  height:54px;
  background:radial-gradient(closest-side,rgba(255,255,255,0.6),rgba(255,255,255,0));
  filter:blur(5px);
  animation:avvy-drift 92s linear -52s infinite;
}

/* top bar */
.header{
  position:relative;
  z-index:3;
  display:flex;
  justify-content:center;
  padding:48px clamp(24px,6vw,84px) 4px;
}
.logo{
  height:clamp(64px,8.5vw,92px);
  width:auto;
  display:block;
}

/* hero */
.hero{
  position:relative;
  z-index:3;
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:24px clamp(24px,6vw,84px) 8px;
}
.hero-inner{
  max-width:760px;
  width:100%;
}
.eyebrow{
  display:inline-block;
  font-family:'Nunito';
  font-weight:800;
  font-size:14px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:#EE7C1C;
  margin-bottom:22px;
}
.headline{
  font-family:'Fredoka',sans-serif;
  font-weight:600;
  font-size:clamp(40px,6.4vw,82px);
  line-height:1.02;
  letter-spacing:-0.01em;
  margin:0 0 22px;
  color:#15243C;
  text-wrap:balance;
}
.subhead{
  max-width:560px;
  margin:0 auto 38px;
  font-size:clamp(17px,1.7vw,20px);
  line-height:1.6;
  color:#4E5C74;
  font-weight:500;
  text-wrap:pretty;
}

/* success state */
.success-card{
  max-width:560px;
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:16px;
  text-align:left;
  background:#ffffff;
  border:1.5px solid rgba(21,36,60,0.08);
  border-radius:22px;
  padding:22px 26px;
  box-shadow:0 18px 44px -28px rgba(21,36,60,0.4);
}
.success-card[hidden]{display:none}
.success-icon{
  flex:none;
  width:46px;
  height:46px;
  border-radius:50%;
  background:#1C9A5E;
  display:flex;
  align-items:center;
  justify-content:center;
}
.success-message{
  margin:0;
  font-size:16px;
  line-height:1.5;
  font-weight:600;
  color:#15243C;
}

/* signup form */
.signup-wrap{
  max-width:580px;
  margin:0 auto;
}
.signup-form{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  background:#ffffff;
  border:1.5px solid rgba(21,36,60,0.1);
  border-radius:999px;
  padding:8px 8px 8px 12px;
  box-shadow:0 20px 50px -30px rgba(21,36,60,0.45);
}
.signup-input{
  min-width:0;
  border:none;
  outline:none;
  background:transparent;
  font-size:16px;
  font-weight:600;
  color:#15243C;
  padding:14px 14px;
}
.signup-input--name{flex:1 1 130px}
.signup-input--email{flex:2 1 180px}
.signup-divider{
  flex:none;
  width:1.5px;
  height:26px;
  background:rgba(21,36,60,0.12);
}
.signup-button{
  flex:none;
  display:inline-flex;
  align-items:center;
  gap:9px;
  border:none;
  cursor:pointer;
  background:#F5A623;
  color:#15243C;
  font-family:'Fredoka',sans-serif;
  font-weight:600;
  font-size:16.5px;
  white-space:nowrap;
  padding:15px 26px;
  border-radius:999px;
  transition:transform .15s ease,box-shadow .2s ease,background .2s ease;
}
.signup-button:hover:not(:disabled){
  background:#F0991A;
  transform:translateY(-1px);
  box-shadow:0 12px 26px -12px rgba(238,124,28,0.8);
}
.signup-button:disabled{
  opacity:0.7;
  cursor:default;
}
.signup-error{
  margin:12px 4px 0;
  font-size:14px;
  font-weight:700;
  color:#D1462F;
  text-align:left;
}
.signup-hint{
  margin:14px 4px 0;
  font-size:14px;
  font-weight:600;
  color:#8B93A3;
}

/* animated dotted delivery route */
.route{
  position:relative;
  z-index:2;
  height:64px;
  margin:6px clamp(24px,6vw,84px) 0;
}
.route-line{
  position:absolute;
  top:50%;
  left:4%;
  right:4%;
  height:3px;
  transform:translateY(-50%);
  background-image:repeating-linear-gradient(90deg,rgba(21,36,60,0.32) 0 16px,rgba(21,36,60,0) 16px 30px);
  background-size:30px 3px;
  animation:avvy-dash 1.4s linear infinite;
}
.route-pin{
  position:absolute;
  top:50%;
  transform:translate(-50%,-100%);
}
.route-pin--start{left:4%}
.route-pin--end{left:96%}
.pin{
  width:30px;
  height:30px;
  border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);
  animation:avvy-pinbob 3.4s ease-in-out infinite;
}
.pin--orange{
  background:#F5A623;
  box-shadow:0 8px 14px -8px rgba(238,124,28,0.9);
}
.pin--navy{
  background:#15243C;
  box-shadow:0 8px 14px -8px rgba(21,36,60,0.8);
  animation-delay:-1.7s;
}
.pin-dot{
  position:absolute;
  top:50%;
  left:50%;
  width:11px;
  height:11px;
  background:#FBF6EE;
  border-radius:50%;
  transform:translate(-50%,-50%) rotate(45deg);
}
.route-parcel{
  position:absolute;
  top:50%;
  transform:translate(-50%,-50%);
  animation:avvy-travel 5.2s ease-in-out infinite alternate;
}
.parcel-bob{
  animation:avvy-bob 1.3s ease-in-out infinite;
}
.parcel{
  position:relative;
  width:26px;
  height:24px;
  background:#E7B36A;
  border:2px solid #15243C;
  border-radius:4px;
  box-shadow:0 8px 14px -8px rgba(21,36,60,0.7);
}
.parcel-strap-v{
  position:absolute;
  left:50%;
  top:-2px;
  bottom:-2px;
  width:4px;
  transform:translateX(-50%);
  background:#15243C;
}
.parcel-strap-h{
  position:absolute;
  top:50%;
  left:-2px;
  right:-2px;
  height:4px;
  transform:translateY(-50%);
  background:rgba(21,36,60,0.45);
}

/* footer */
.footer{
  position:relative;
  z-index:3;
  display:flex;
  flex-wrap:wrap;
  gap:18px 32px;
  align-items:center;
  justify-content:space-between;
  padding:22px clamp(24px,6vw,84px) 30px;
}
.footer-links{
  display:flex;
  flex-wrap:wrap;
  gap:12px 26px;
  align-items:center;
}
.footer-link{
  display:inline-flex;
  align-items:center;
  gap:9px;
  text-decoration:none;
  color:#15243C;
  font-weight:700;
  font-size:15px;
}
.footer-icon{
  display:inline-flex;
  width:30px;
  height:30px;
  border-radius:50%;
  background:rgba(245,166,35,0.18);
  align-items:center;
  justify-content:center;
}
.footer-copy{
  margin:0;
  font-size:14px;
  font-weight:600;
  color:#8B93A3;
}