:root {
  --blue: #1d5fa8;
  --orange: #f27c21;
  --green: #00a651;
  --ink: #12355f;
  --bg: #ffffff;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}
.bg-shape { position: fixed; border-radius: 50%; z-index: 0; pointer-events: none; }
.s1 { width: 480px; height: 480px; background: rgba(29, 95, 168, .08); top: -160px; right: -140px; }
.s2 { width: 380px; height: 380px; background: rgba(242, 124, 33, .10); bottom: -150px; left: -120px; }

.wrap {
  position: relative; z-index: 1;
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 40px 20px 20px;
}
.logo { width: clamp(220px, 40vw, 380px); height: auto; animation: float 4s ease-in-out infinite; }
.brand {
  font-family: "Caprasimo", Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.4rem, 7vw, 4rem);
  color: var(--blue);
  margin-top: 8px;
  line-height: 1.1;
}
.tagline { color: var(--orange); font-weight: 600; font-size: clamp(1rem, 2.6vw, 1.3rem); margin-top: 6px; }
.divider { width: 70px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--blue), var(--orange)); margin: 28px 0; }
.soon {
  font-size: clamp(1.8rem, 5vw, 3rem);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
}
.msg { margin-top: 14px; max-width: 520px; line-height: 1.7; color: #4a6483; font-size: clamp(.95rem, 2.4vw, 1.1rem); }
.dots { display: flex; gap: 10px; margin-top: 30px; }
.dots span { width: 11px; height: 11px; border-radius: 50%; background: var(--blue); animation: pulse 1.4s infinite ease-in-out; }
.dots span:nth-child(2) { background: var(--orange); animation-delay: .2s; }
.dots span:nth-child(3) { background: var(--green); animation-delay: .4s; }

footer { position: relative; z-index: 1; text-align: center; padding: 20px; font-size: .85rem; color: #7a8da6; }

@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes pulse { 0%, 80%, 100% { transform: scale(.6); opacity: .5; } 40% { transform: scale(1.1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }