:root{
  --bg:#000;
  --fg:#fff;
  --max-width:980px;
  --gap:22px;
  --font-family: "Cal Sans", "Caladea", "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* Reset-ish */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-family);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Centering container */
.center{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:var(--gap);
  padding:28px;
  text-align:center;
  max-width:var(--max-width);
  margin:0 auto;
}

/* Logo styling */
.logo img, .logo .logo-img{
  display:block;
  width:clamp(72px, 11vw, 140px);
  height:auto;
  filter:drop-shadow(0 6px 18px rgba(255,255,255,0.04));
  transform-origin:center;
  animation: logo-breathe 2400ms ease-in-out infinite;
}

/* Big fat status text */
.status{
  font-weight:800;
  letter-spacing:0.12em;
  font-size:clamp(20px, 6.6vw, 48px);
  margin-top:6px;
  color:var(--fg);
  text-transform:uppercase;
  text-shadow: 0 2px 12px rgba(255,255,255,0.04);
  line-height:1;
  will-change:transform,opacity;
  animation: pulse 1800ms ease-in-out infinite;
}

/* Small accessibility hint for screen readers only (hidden visually) */
.sr-only{
  position:absolute!important;
  width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Subtle animations */
@keyframes pulse{
  0%{ transform:scale(1); opacity:1; filter:brightness(1);}
  50%{ transform:scale(1.02); opacity:0.98; filter:brightness(1.04);}
  100%{ transform:scale(1); opacity:1; filter:brightness(1);}
}

@keyframes logo-breathe{
  0%{ transform:translateY(0) scale(1); opacity:1; }
  50%{ transform:translateY(-3px) scale(1.01); opacity:0.98; }
  100%{ transform:translateY(0) scale(1); opacity:1; }
}

/* New action button row */
.actions{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:center;
  margin-top:6px;
}

/* Base button */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:10px;
  text-decoration:none;
  font-weight:700;
  font-size:14px;
  color:var(--fg);
  background:transparent;
  border:1px solid rgba(255,255,255,0.08);
  transition:transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
  will-change:transform,opacity;
}

/* Primary (location) — subtle inversion to stand out on black bg */
.btn-primary{
  background:rgba(255,255,255,0.06);
  color:var(--fg);
  border-color:rgba(255,255,255,0.12);
}

/* Secondary (instagram) — outline */
.btn-secondary{
  background:transparent;
}

/* Icon styling */
.btn svg{ display:block; color:var(--fg); opacity:0.95 }

/* Hover / focus */
.btn:hover, .btn:focus{
  transform:translateY(-3px);
  box-shadow:0 8px 24px rgba(0,0,0,0.45), 0 2px 6px rgba(255,255,255,0.02);
  outline:none;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .logo, .status, .btn { animation:none; transition:none; transform:none; }
}

/* Responsive tweaks */
@media (max-width:420px){
  .center{gap:14px;padding:20px}
  .status{letter-spacing:0.08em}
}