/* Shared by every page. Two pages is exactly where duplicated CSS starts to
   rot, so it lives in one file from the start. */

:root {
  color-scheme: light dark;

  --bg:    #fbfbfd;
  --fg:    #14131c;
  --muted: #60606f;
  --line:  #e6e5ee;
  --field: #ffffff;

  /* accent ramp — indigo → fuchsia → amber */
  --g1: #6366f1;
  --g2: #a855f7;
  --g3: #d946ef;
  --g4: #f59e0b;

  --glow-a: rgba(99, 102, 241, .16);
  --glow-b: rgba(217, 70, 239, .13);
  --glow-c: rgba(245, 158, 11, .10);

  --ok-bg:  rgba(16, 185, 129, .10);
  --ok-fg:  #047857;
  --err-bg: rgba(239, 68, 68, .10);
  --err-fg: #b91c1c;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:    #0c0b12;
    --fg:    #f4f3f8;
    --muted: #9b99ab;
    --line:  #262435;
    --field: #171524;

    --g1: #818cf8;
    --g2: #c084fc;
    --g3: #e879f9;
    --g4: #fbbf24;

    --glow-a: rgba(129, 140, 248, .20);
    --glow-b: rgba(232, 121, 249, .15);
    --glow-c: rgba(251, 191, 36, .10);

    --ok-bg:  rgba(16, 185, 129, .14);
    --ok-fg:  #6ee7b7;
    --err-bg: rgba(239, 68, 68, .14);
    --err-fg: #fca5a5;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  color: var(--fg);
  background:
    radial-gradient(60rem 40rem at 12% -8%,  var(--glow-a), transparent 60%),
    radial-gradient(48rem 34rem at 92% 4%,   var(--glow-b), transparent 62%),
    radial-gradient(40rem 30rem at 68% 92%,  var(--glow-c), transparent 65%),
    var(--bg);
  background-attachment: fixed;
  font: 400 17px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

main { width: 100%; max-width: 34rem; margin: 0 auto; padding: 11vh 24px 4rem; }

/* NFC wave mark */
.mark { display: block; width: 30px; height: 45px; margin-bottom: 2.25rem; }
.mark .dot  { fill: var(--g1); }
.mark .wave { fill: none; stroke-width: 3.5; stroke-linecap: round; }
.mark .w1 { stroke: var(--g2); }
.mark .w2 { stroke: var(--g3); }
.mark .w3 { stroke: var(--g4); }

@media (prefers-reduced-motion: no-preference) {
  .mark .wave { animation: pulse 2.6s ease-in-out infinite; }
  .mark .w1 { animation-delay: 0s; }
  .mark .w2 { animation-delay: .22s; }
  .mark .w3 { animation-delay: .44s; }
}
@keyframes pulse { 0%, 70%, 100% { opacity: .38 } 22% { opacity: 1 } }

h1 {
  margin: 0 0 1.25rem;
  font-size: clamp(2rem, 7.2vw, 2.9rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
  font-weight: 650;
}
h1 .grad {
  background-image: linear-gradient(105deg, var(--g1), var(--g2) 45%, var(--g3));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

p { margin: 0 0 1.25rem; color: var(--muted); max-width: 30rem; }

.soon {
  margin: 2.25rem 0 0;
  font-size: 1.0625rem;
  font-weight: 550;
  letter-spacing: .01em;
  color: var(--g1);
}

a.quiet { color: var(--g1); text-decoration-color: var(--line); text-underline-offset: 3px; }
a.quiet:hover { text-decoration-color: currentColor; }

/* ---------- form ---------- */

form { margin-top: 2rem; }

.field { margin-bottom: 1.1rem; }
.field label {
  display: block;
  margin-bottom: .4rem;
  font-size: .9375rem;
  font-weight: 550;
  color: var(--fg);
}
.field input,
.field textarea {
  width: 100%;
  padding: .65rem .8rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--field);
  color: var(--fg);
  font: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--g1);
  box-shadow: 0 0 0 3px var(--glow-a);
}

/* honeypot — off-screen rather than display:none, which some bots skip */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

button[type="submit"] {
  margin-top: .5rem;
  padding: .7rem 1.4rem;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(105deg, var(--g1), var(--g2));
  color: #fff;
  font: inherit;
  font-weight: 550;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, opacity .15s;
  box-shadow: 0 8px 22px -12px var(--glow-a);
}
button[type="submit"]:hover { transform: translateY(-1px); box-shadow: 0 12px 28px -12px var(--glow-b); }
button[type="submit"]:disabled { opacity: .6; cursor: default; transform: none; }

.banner {
  margin: 0 0 1.75rem;
  padding: .8rem 1rem;
  border-radius: 10px;
  font-size: .9375rem;
  max-width: none;
}
.banner.ok  { background: var(--ok-bg);  color: var(--ok-fg); }
.banner.err { background: var(--err-bg); color: var(--err-fg); }

.cf-turnstile { margin: 1.25rem 0 .25rem; }

/* ---------- footer ---------- */

footer {
  padding: 1.75rem 24px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .875rem;
  position: relative;
}
footer::before {
  content: "";
  position: absolute;
  inset: -1px 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--g1), var(--g2), var(--g3), var(--g4));
}
footer div {
  max-width: 34rem;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  justify-content: space-between;
}
footer a { color: inherit; text-decoration-color: var(--line); text-underline-offset: 3px; }