:root{
  --purple:#8b5cf6;
  --purple2:#6d28d9;
  --dark:#050507;
  --green:#4ade80;
  --red:#f87171;
  --pad:22px;
  --gap:18px;
}
*{margin:0;padding:0;box-sizing:border-box}

body{
  font-family:'Aldrich',system-ui,sans-serif;
  min-height:100vh;
  min-height:100dvh;
  padding:var(--pad);
  color:#fff;
  background:
    radial-gradient(1200px circle at 20% -10%,rgba(139,92,246,.18),transparent 60%),
    var(--dark);
}

.grid{
  max-width:720px;
  margin:auto;
  min-height:calc(100vh - var(--pad)*2);
  min-height:calc(100dvh - var(--pad)*2);
  display:flex;
  flex-direction:column;
  gap:var(--gap);
}

.tile{
  position:relative;
  overflow:hidden;
  border-radius:24px;
  padding:clamp(20px,3vh,30px);
  background:rgba(255,255,255,.04);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.07);
}

.title-tile{background:linear-gradient(135deg,rgba(139,92,246,.35),rgba(25,25,35,.5))}
.title-tile h1{font-weight:400;font-size:clamp(1.6rem,4.6vh,2.3rem);line-height:1.05;text-shadow:0 0 24px var(--purple)}
.title-tile .text{opacity:.78;font-size:clamp(.85rem,1.9vh,1rem);line-height:1.45;margin-top:10px}

.back{
  display:inline-flex;align-items:center;gap:8px;
  margin-bottom:16px;
  padding:8px 16px;border-radius:99px;
  border:1px solid rgba(255,255,255,.18);
  color:#fff;text-decoration:none;
  font-size:clamp(.8rem,1.8vh,.95rem);
  transition:background .2s ease,border-color .2s ease;
}
.back:hover{background:rgba(139,92,246,.3);border-color:var(--purple)}

/* ---------- Form ---------- */
.form-tile form{display:flex;flex-direction:column;gap:16px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:clamp(.85rem,1.8vh,1rem);opacity:.85}
.req{color:var(--purple);opacity:1}
.opt{opacity:.5;font-size:.85em}
.field input[type="text"],.field input[type="email"],.field textarea{
  font:inherit;
  font-size:1rem;
  color:#fff;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
  border-radius:12px;
  padding:12px 14px;
  resize:vertical;
  transition:border-color .2s ease,background .2s ease;
}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.35)}
.field input:focus,.field textarea:focus{
  outline:none;
  border-color:var(--purple);
  background:rgba(139,92,246,.1);
}
.charcount{align-self:flex-end;font-size:.75rem;opacity:.5;margin-top:-10px}
.err{color:var(--red);font-size:.82rem;min-height:1.1em}
.checkline{display:flex;align-items:flex-start;gap:10px;font-size:clamp(.85rem,1.8vh,1rem);opacity:.9;cursor:pointer}
.checkline input{margin-top:3px;width:18px;height:18px;accent-color:var(--purple);flex:none}
.submitbtn{
  align-self:flex-start;
  font:inherit;
  font-size:1rem;
  color:#fff;
  background:var(--purple);
  border:0;
  border-radius:99px;
  padding:12px 28px;
  cursor:pointer;
  transition:background .2s ease;
}
.submitbtn:hover{background:var(--purple2)}
.submitbtn:disabled{opacity:.6;cursor:default}
.formmsg{font-size:.9rem;min-height:1.2em}
.formmsg.ok{color:var(--green)}
.formmsg.bad{color:var(--red)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important;animation:none !important}
}