:root {
  --navy:#031f3d;
  --blue:#0b3a67;
  --gold:#ffbf00;
  --gold-light:#ffd55a;
  --paper:#f8fafc;
}

* { box-sizing:border-box; margin:0; padding:0; }

html, body { min-height:100%; }

body {
  color:var(--navy);
  background:var(--paper);
  font-family:Arial, Helvetica, sans-serif;
}

.coming-soon {
  position:relative;
  isolation:isolate;
  min-height:100svh;
  display:grid;
  place-items:center;
  overflow:hidden;
  padding:34px 24px 72px;
  background:
    linear-gradient(rgba(3,31,61,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(3,31,61,.035) 1px,transparent 1px),
    radial-gradient(circle at 50% 43%,#fff 0,#f8fafc 48%,#eaf0f6 100%);
  background-size:46px 46px,46px 46px,auto;
}

.coming-soon::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(120deg,transparent 35%,rgba(255,191,0,.06) 50%,transparent 65%);
  animation:sheen 9s linear infinite;
}

.content {
  width:min(760px,94vw);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.logo-frame {
  width:clamp(190px,25vw,285px);
  aspect-ratio:1;
  display:grid;
  place-items:center;
  margin-bottom:10px;
  border-radius:50%;
  background:rgba(255,255,255,.8);
  box-shadow:0 24px 70px rgba(3,31,61,.11);
}

.logo {
  width:118%;
  height:118%;
  object-fit:contain;
  mix-blend-mode:multiply;
}

.status {
  display:flex;
  align-items:center;
  gap:10px;
  color:#587086;
  font-size:11px;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
}

.status-dot {
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 7px rgba(255,191,0,.14);
  animation:pulse 1.9s ease-in-out infinite;
}

h1 {
  margin:17px 0 16px;
  font-size:clamp(46px,6.7vw,88px);
  font-weight:900;
  line-height:.82;
  letter-spacing:-.045em;
}

h1 span { color:var(--blue); }

h1::after {
  content:"";
  display:block;
  width:74px;
  height:5px;
  margin:25px auto 0;
  border-radius:99px;
  background:linear-gradient(90deg,var(--gold),var(--gold-light));
}

.description {
  max-width:570px;
  color:#607486;
  font-size:clamp(15px,1.8vw,18px);
  line-height:1.7;
}

.progress {
  width:min(330px,70vw);
  height:4px;
  margin-top:26px;
  overflow:hidden;
  border-radius:99px;
  background:rgba(3,31,61,.1);
}

.progress span {
  display:block;
  width:42%;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--blue),var(--gold));
  animation:loading 2.4s ease-in-out infinite;
}

.soon {
  margin-top:13px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.32em;
}

.honeycomb {
  position:absolute;
  z-index:-1;
  width:360px;
  height:360px;
  opacity:.08;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='104' height='90' viewBox='0 0 104 90'%3E%3Cpath d='M26 2h52l24 43-24 43H26L2 45z' fill='none' stroke='%23031f3d' stroke-width='3'/%3E%3C/svg%3E");
}

.honeycomb-left { left:-120px; top:-80px; transform:rotate(12deg); }
.honeycomb-right { right:-140px; bottom:-100px; transform:rotate(-9deg); }

.glow {
  position:absolute;
  z-index:-2;
  width:34vw;
  aspect-ratio:1;
  border-radius:50%;
  filter:blur(90px);
  opacity:.15;
}

.glow-gold { left:-15vw; bottom:-15vw; background:var(--gold); }
.glow-blue { right:-15vw; top:-15vw; background:#3d83bd; }

footer {
  position:absolute;
  left:28px;
  right:28px;
  bottom:20px;
  display:flex;
  justify-content:space-between;
  color:rgba(3,31,61,.48);
  font-size:9px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}

@keyframes pulse { 50% { box-shadow:0 0 0 12px rgba(255,191,0,0); } }
@keyframes loading { 0% { transform:translateX(-110%); } 50%,100% { transform:translateX(250%); } }
@keyframes sheen { from { transform:translateX(-100%); } to { transform:translateX(100%); } }

@media (max-width:600px) {
  .coming-soon { padding-top:24px; }
  .logo-frame { width:190px; }
  h1 { font-size:48px; }
  footer { left:14px; right:14px; bottom:12px; font-size:7px; }
  footer > span:last-child { display:none; }
}

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation:none !important; }
}