:root {
  --bg: #0f0f10;
  --bg-2: #141518;
  --fg: #e9e9eb;
  --muted: #a7a7ab;
  --accent: #9ae6b4; /* subtle green */
  --card: rgba(255,255,255,0.06);
  --stroke: rgba(255,255,255,0.12);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  color: var(--fg);
  background: radial-gradient(1200px 800px at 15% 10%, #1f2229 0%, transparent 50%),
              radial-gradient(1200px 800px at 85% 90%, #1b1f25 0%, transparent 50%),
              linear-gradient(180deg, var(--bg), var(--bg-2));
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* subtle animated gradient orb */
.orb {
  position: fixed; inset: -10vmax; pointer-events: none; filter: blur(60px); opacity: 0.35; mix-blend-mode: screen;
  background: radial-gradient(closest-side, #7dd3fc, transparent),
              radial-gradient(closest-side, #a78bfa, transparent),
              radial-gradient(closest-side, #34d399, transparent);
  animation: drift 18s ease-in-out infinite alternate;
}
@keyframes drift { 0%{ transform: translate(-4%, -3%) scale(1); } 100%{ transform: translate(6%, 5%) scale(1.05);} }

.card {
  width: min(680px, 92vw);
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: 24px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06);
  padding: clamp(20px, 3.2vw, 36px);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  position: relative;
  overflow: hidden;
}

.logo {
  display: block;
  width: min(420px, 66vw);
  height: auto;
  margin: 6px auto 18px;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.45));
  animation: float 6s ease-in-out infinite;
}
@keyframes float { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-6px); } }

h1 { font-size: clamp(26px, 4.4vw, 44px); letter-spacing: 0.4px; margin: 2px 0 10px; text-align: center; }
p.tag { color: var(--muted); text-align: center; margin: 0 0 22px; font-size: clamp(14px, 2.2vw, 16px); }

.cta {
  display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; align-items: center;
}
.btn {
  --btn-bg: #1f2937; --btn-brd: rgba(255,255,255,0.14);
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: 14px; border: 1px solid var(--btn-brd);
  color: var(--fg); text-decoration: none; font-weight: 600; letter-spacing: 0.2px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)) , var(--btn-bg);
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease;
  box-shadow: 0 6px 16px rgba(0,0,0,0.35);
}
form.cta {display:flex;flex-direction:column;align-items:stretch}
form.cta .btn{width:100%}
form.cta textarea.btn{resize:vertical}
.btn:hover { transform: translateY(-1px); border-color: rgba(154, 230, 180, 0.55); box-shadow: 0 10px 22px rgba(0,0,0,0.45); }
.btn.primary { background: linear-gradient(180deg, rgba(154,230,180,0.18), rgba(154,230,180,0.08)), #0f172a; }

.divider { height: 1px; background: var(--stroke); margin: 22px 0; }

.meta {
  display: grid; grid-template-columns: 1fr; gap: 12px; color: var(--muted); font-size: 14px; text-align: center;
}

footer { margin-top: 16px; text-align: center; color: var(--muted); font-size: 12px; }

/* accessibility/utility */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  .orb, .logo { animation: none; }
}