:root{
  --text-muted: rgba(255,255,255,.75);
  --panel: rgba(0,0,0,.55);
  --panel-border: rgba(255,255,255,.12);
}

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Fullscreen hero with background image */
.hero{
  min-height: 100vh;
  position: relative;

  /* Replace this URL with your Andromeda image path OR a hosted image */
  background-image: url("andromeda.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-overlay{
  position:absolute;
  inset:0;
  background: radial-gradient(circle at 30% 20%, rgba(40,120,255,.22), rgba(0,0,0,.85) 60%),
              linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,.85));
}

.hero-content{
  position: relative;
  z-index: 2;
  padding-top: 5rem;
  padding-bottom: 4rem;
}

.text-white-75{ color: var(--text-muted); }

.brand-pill{
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.5rem 1rem;
  width: fit-content;
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
}

.brand-dot{
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  background: #3aa3ff;
  box-shadow: 0 0 20px rgba(58,163,255,.75);
}

.brand-name{
  color: white;
  letter-spacing: .5px;
  font-weight: 600;
}

.signup-card{
  max-width: 640px;
  padding: 1.25rem;
  border-radius: 18px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  backdrop-filter: blur(8px);
}

.form-control{
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.20);
  color: white;
}

.form-control::placeholder{
  color: rgba(255,255,255,.55);
}

.form-control:focus{
  background: rgba(0,0,0,.55);
  color: white;
  border-color: rgba(58,163,255,.65);
  box-shadow: 0 0 0 .25rem rgba(58,163,255,.15);
}

.btn-primary{
  background: #1e90ff;
  border-color: #1e90ff;
}

.btn-primary:hover{
  background: #63b3ff;
  border-color: #63b3ff;
}

.feature-chip{
  padding: .5rem .9rem;
  border-radius: 999px;
  background: rgba(0,0,0,.35);
  border: 1px solid var(--panel-border);
  color: rgba(255,255,255,.85);
  font-size: .95rem;
}

/* Honeypot: hidden from humans, visible to bots */
.hp-field{
  position: absolute !important;
  left: -10000px !important;
  top: 0 !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

  .md-zoomable { cursor: zoom-in; }

  .img-zoom-overlay{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.95);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 9999;
  }
  .img-zoom-overlay.is-open{ display:flex; }

.img-zoom-overlay img{
  width: 92vw;        /* <- this is what makes it actually zoom */
  height: auto;
  max-width: 1400px;  /* optional safety cap for huge screens */
  max-height: 92vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 20px 80px rgba(0,0,0,.6);
}

  .img-zoom-close{
    position: fixed;
    top: 16px;
    right: 16px;
    border: 0;
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
  }