*{box-sizing:border-box}

:root{
  --blue:#1456c8;
  --ink:#0b111a;
  --muted:#66717f;
  --line:#e4e9ef;
}

html,body{margin:0;min-height:100%;font-family:Inter,Arial,sans-serif;color:var(--ink)}
body{
  min-height:100vh;
  background:
    radial-gradient(circle at 88% 12%,rgba(20,86,200,.10),transparent 28%),
    linear-gradient(135deg,#fff 0%,#f9fbfd 58%,#eef3fa 100%);
}

.page{
  min-height:100vh;
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  padding:clamp(22px,5vw,64px) clamp(20px,7vw,100px);
}

.header{position:relative;z-index:2;width:100%}
.header a{display:inline-block;max-width:100%}

/* Tight, responsive logo — no oversized source whitespace */
.logo{
  display:block;
  width:min(520px,62vw);
  max-width:100%;
  height:auto;
  object-fit:contain;
}

.hero{
  position:relative;
  z-index:2;
  width:min(820px,100%);
  margin:auto 0;
  padding:52px 0 70px;
}

.eyebrow{
  display:flex;
  align-items:center;
  gap:11px;
  margin-bottom:20px;
  color:var(--blue);
  font-size:11px;
  font-weight:800;
  letter-spacing:.20em;
}
.eyebrow span{width:32px;height:2px;background:var(--blue)}

h1{
  margin:0;
  font-size:clamp(40px,6vw,78px);
  line-height:1.02;
  letter-spacing:-.045em;
  font-weight:500;
}
h1 strong{font-weight:800}

.lead{
  max-width:650px;
  margin:25px 0 32px;
  color:var(--muted);
  font-size:clamp(15px,1.7vw,19px);
  line-height:1.7;
}

.status{
  display:inline-flex;
  align-items:center;
  gap:14px;
  padding:14px 18px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.82);
  box-shadow:0 12px 35px rgba(11,17,26,.06);
  backdrop-filter:blur(12px);
}
.status i{
  width:9px;height:9px;border-radius:50%;
  background:var(--blue);
  box-shadow:0 0 0 6px rgba(20,86,200,.10);
}
.status strong{display:block;font-size:13px}
.status small{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:9px;
  letter-spacing:.15em;
}

.footer{
  position:relative;z-index:2;
  display:flex;align-items:center;gap:15px;
  color:#7b8693;font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;
}
.footer-line{width:40px;height:1px;background:#cfd6df}

.shape{
  position:absolute;
  pointer-events:none;
  border:1px solid rgba(20,86,200,.07);
  transform:rotate(45deg);
}
.shape-one{width:42vw;height:42vw;right:-22vw;bottom:-20vw}
.shape-two{width:22vw;height:22vw;right:-13vw;top:15vw}

@media (max-width:700px){
  .page{
    min-height:100svh;
    padding:22px 20px 18px;
  }

  .logo{
    width:100%;
    max-width:390px;
    /* keep the complete lockup visible */
  }

  .hero{
    margin:auto 0;
    padding:48px 0 42px;
  }

  .eyebrow{
    font-size:9px;
    letter-spacing:.18em;
    margin-bottom:15px;
  }

  .eyebrow span{width:25px}

  h1{
    font-size:clamp(34px,10.5vw,48px);
    line-height:1.04;
  }

  .lead{
    margin:20px 0 25px;
    font-size:15px;
    line-height:1.6;
  }

  .status{
    width:100%;
    max-width:360px;
  }

  .footer{
    font-size:8.5px;
    gap:9px;
  }

  .footer-line{width:25px}
}

@media (max-width:380px){
  .page{padding-left:16px;padding-right:16px}
  .logo{max-width:330px}
  .hero{padding-top:36px}
  h1{font-size:33px}
  .footer span:last-child{display:none}
}