:root{
  --accent:#8c0d0d;       /* dark crimson to match logo */
  --accent-hover:#b31212; /* slight brighten on hover */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:#000;
  color:#fff;
  font-family:system-ui,Arial,Helvetica,sans-serif;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* top bar with contact button */
.topbar{
  position:fixed; top:0; left:0; right:0; height:64px;
  display:flex; align-items:center; justify-content:flex-end; padding:0 16px;
  background:linear-gradient(to bottom, rgba(0,0,0,.85), rgba(0,0,0,0));
  pointer-events:none;
}
.topbar .contact-btn{
  pointer-events:auto;
  background:#2a2a2a;              /* flat dark gray */
  border:1px solid #444;           /* subtle border instead of glow */
  color:#ddd;
  padding:4px 8px;
  border-radius:6px;
  font-weight:500;
  font-size:13px;
  cursor:pointer;
  box-shadow:none;
  transition: all .25s ease;
}
.topbar .contact-btn:hover{
  background:#3a3a3a;              /* just a shade lighter */
  border-color: var(--accent);      /* tiny nod to your crimson accent */
  color:#fff;
}

/* centered logo w/ smooth, comfy fade-in */
.stage{ text-align:center; padding:24px; }
.logo{
  width:min(560px,85vw);
  height:auto;
  display:block;
  margin:0 auto;

  opacity:0;
  filter:blur(2px);
  transform:translateY(8px) scale(0.985);
  animation:logoEnter 900ms cubic-bezier(.22,.61,.36,1) 120ms both; /* ease-out + tiny delay */
  will-change: opacity, filter, transform;
}
@keyframes logoEnter{
  to{
    opacity:1;
    filter:blur(0);
    transform:translateY(0) scale(1);
  }
}
/* respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .logo{ animation:none; opacity:1; filter:none; transform:none; }
}

/* modal */
.modal{ position:fixed; inset:0; display:none; place-items:center; background:rgba(0,0,0,.8); }
.modal[open]{ display:grid; }
.card{
  width:min(420px,92vw); background:#1e1e1e; color:#f5f5f5;
  border:1px solid #333; border-radius:12px; padding:20px;
  box-shadow:0 0 20px rgba(230,0,0,0.5); position:relative;
}
.card h2{ margin:0 0 14px; text-align:center; font-size:22px; }
.close{
  border:none; background:transparent; color:#aaa; font-size:26px;
  position:absolute; top:10px; right:14px; cursor:pointer;
}
.close:hover{ color:#fff; }

label{ display:block; font-size:14px; margin:10px 0 6px; }
input[type="text"], input[type="email"], textarea{
  width:100%; padding:10px; border:1px solid #444; border-radius:6px;
  background:#2a2a2a; color:#fff;
}
input[type="text"]:focus, input[type="email"]:focus, textarea:focus{
  outline:none; border-color: var(--accent); background:#333;
}
textarea{ resize:vertical; min-height:110px; }
.checkline{ display:flex; align-items:center; gap:8px; margin:10px 0; }
input[type="checkbox"]{ width:auto; margin:0; }

.submit-btn{
  width:100%; padding:12px; border:none; border-radius:8px; font-weight:700;
  background: var(--accent); color:#fff; cursor:pointer; margin-top:10px;
}
.submit-btn:hover{ background: var(--accent-hover); }

.note{ font-size:12px; color:#aaa; text-align:center; margin-top:8px; }

.alert{ margin:10px 0 0; padding:10px; border-radius:8px; display:none; }
.alert.ok{ background:#0f3; color:#021; }
.alert.err{ background:#f33; color:#fff; }

/* utility: hidden honeypot (use instead of inline style if you want) */
.hp{ display:none !important; }