:root{
  --accent: #22c55e;           /* green */
  --accent-strong: #16a34a;    /* hover */
  --lightblue: #93c5fd;        /* tagline */
  --text: #e8f5ee;
  --shadow: rgba(0,0,0,.35);
}

/* Full-page background (root-relative path; change if needed) */
.bg{
  position: fixed;
  inset: 0;
  background: url("/images/dark_green_nebula_background.png") center/cover no-repeat fixed;
  box-shadow: inset 0 0 0 100vmax rgba(0,0,0,.45);
  z-index: -1;
}

html,body{ height:100%; }
body{
  margin:0;
  color:var(--text);
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.45;
}

.center-wrap{
  min-height:100svh;
  display:grid;
  place-items:center;
  padding:24px;
}

/* Card */
.card{
  text-align:center;
  max-width:760px;
  width:min(92vw,760px);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: clamp(22px,4vw,40px);
  border-radius: 20px;
  box-shadow: 0 20px 50px var(--shadow), inset 0 0 0 1px rgba(255,255,255,.05);
}

/* Headers */
.brand{
  display:inline-block;
  margin:0 0 .5em 0;
  padding:.3em .7em;
  font-weight:800;
  font-size: clamp(1.7rem, 5vw, 3.1rem);
  border: 4px solid var(--accent);      /* green border */
  border-radius: 14px;
}

.tagline{
  margin:0 0 .6em 0;
  font-weight:650;
  color:var(--lightblue);
  font-size: clamp(1.1rem, 3.2vw, 1.6rem);
}

.note{
  margin:0 0 1.2em 0;
  font-size: clamp(.95rem, 2.6vw, 1.05rem);
}

/* Buttons (generic & primary) */
.btn{
  appearance:none;
  border:none;
  background:var(--accent);
  color:#0b1b12;
  font-weight:800;
  font-size: clamp(1rem, 3.2vw, 1.1rem);
  padding:.85em 1.3em;
  border-radius:999px;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(0,0,0,.35);
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.btn:hover{ background:var(--accent-strong); transform:translateY(-1px); }
.btn:active{ transform:translateY(0); box-shadow:0 4px 12px rgba(0,0,0,.35); }
.btn:focus{ outline:3px solid #ffffff66; outline-offset:2px; }

/* Support classes used by your existing form */
.form-control{
  width:100%;
  border-radius:14px;
  border:2px solid #e9ecef;
  padding:.7rem 1rem;
  background:#0c1411cc;
  color:var(--text);
  font-size: clamp(14px, 2.5vw, 16px);
}
.form-control:focus{ border-color:#7dd3fc; outline:none; box-shadow:0 0 0 0.2rem #7dd3fc33; }

.btn-primary{ composes: btn; } /* if your tooling ignores composes, leave next line: */
.btn-primary{ background:var(--accent); color:#0b1b12; }
.btn-primary:hover{ background:var(--accent-strong); }

.inquiry-btn{ composes: btn; }
.inquiry-btn{ background:var(--accent); }

.price-tag{
  display:inline-block;
  margin:1rem 0;
  padding:.5rem 1.25rem;
  border-radius:999px;
  background:#f97316; /* simple, readable */
  color:white;
  font-weight:700;
  font-size: clamp(1rem, 3vw, 1.2rem);
}

.alert{ margin:.8rem 0; padding:.8rem 1rem; border-radius:12px; }
.alert-success{ background:#14532d; color:#d1fae5; }
.alert-danger{ background:#7f1d1d; color:#fee2e2; }

.section-divider{ height:2px; margin:1.4rem 0; background:linear-gradient(90deg,#16a34a,#0ea5e9); border-radius:1px; }

.row{ display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:1rem; }
@media (max-width:720px){ .row{ grid-template-columns:1fr; } }

/* Motion accessibility */
@media (prefers-reduced-motion: reduce){
  .btn{ transition:none; }
}