:root{
  --bg-top: #7fd3de;
  --bg-bottom: #3b8c99;

  --ink: #0f2f36;
  --ink-soft: #245d67;
  --ink-muted: #3f6f78;

  --accent: #3fb6c6;
}

body{
  margin:0;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family: system-ui, sans-serif;

  background: linear-gradient(
    180deg,
    var(--bg-top) 0%,
    var(--bg-bottom) 100%
  );
}

.home-card{
  background: rgba(255,255,255,.92);
  padding: 36px;
  border-radius: 20px;
  max-width: 520px;
  text-align: center;
  box-shadow: 0 20px 40px rgba(0,0,0,.15);
}

/* Logo / brand */
.brand-lockup{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 12px;
  margin-bottom: 10px;
}

.logo-mark{
  width: 72px;
  height: auto;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.10));
}

.brand-name{
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -0.6px;
  line-height: 1;
  color: var(--ink);
}

.brand-name .sync{
  color: var(--accent);
}

.tagline{
  font-weight: 700;
  color: var(--ink-soft);
  margin: 8px 0 0;
}

.description{
  color: var(--ink-muted);
  margin: 16px 0 28px;
}

.btn{
  display:inline-block;
  padding: 14px 22px;
  border-radius: 14px;
  text-decoration:none;
  font-weight:600;
}

.btn.primary{
  background: var(--accent);
  color: #ffffff;
}

.emergency-notice {
  background: #fff4f4;
  border-left: 5px solid #d9534f;
  padding: 18px 22px;
  margin: 24px auto 32px;
  border-radius: 14px;
  text-align: center;
  max-width: 90%;
}

.emergency-notice strong {
  display: block;
  color: #b02a2a;
  margin-bottom: 6px;
}

.emergency-notice p {
  margin: 8px 0 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #5a1f1f;
}