:root {
  --brand-red: #F20303;
  --brand-blue: #1A4D8F;
  --brand-sand: #F5EBD0;
  --brand-cream: #FFFDF4;
  --fg: #1A4D8F;
  --muted: #6b7a8f;
  --border: #e7dfc6;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--brand-cream);
  color: var(--fg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

.bg {
  position: fixed; inset: 0; pointer-events: none; z-index: -1; overflow: hidden;
}
.blob { position: absolute; border-radius: 9999px; filter: blur(80px); }
.blob-sand { top: -10rem; left: -10rem; width: 28rem; height: 28rem; background: var(--brand-sand); opacity: .55; }
.blob-blue { bottom: -10rem; right: -10rem; width: 32rem; height: 32rem; background: var(--brand-blue); opacity: .18; }
.dot-red { position: absolute; top: 33%; right: 25%; width: 12px; height: 12px; border-radius: 9999px; background: var(--brand-red); }

.container {
  max-width: 64rem;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 2.5rem 1.5rem;
}
@media (min-width: 640px) { .container { padding: 2.5rem 2.5rem; } }

.header { display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: .5rem; }
.brand-dot { width: 12px; height: 12px; border-radius: 9999px; background: var(--brand-red); }
.brand-name { font-family: 'JetBrains Mono', monospace; font-size: .875rem; letter-spacing: .08em; color: var(--muted); }
.badge {
  border: 1px solid var(--brand-blue); color: var(--brand-blue);
  border-radius: 9999px; padding: .25rem .75rem;
  font-family: 'JetBrains Mono', monospace; font-size: .7rem;
  text-transform: uppercase; letter-spacing: .2em;
}

.hero { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 4rem 0; }
.eyebrow {
  font-family: 'JetBrains Mono', monospace; font-size: .75rem;
  text-transform: uppercase; letter-spacing: .3em; color: var(--brand-red); margin: 0 0 1.5rem;
}
.title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 800; line-height: 1.05; letter-spacing: -.02em;
  font-size: clamp(2.75rem, 8vw, 6rem); margin: 0;
}
.title-blue { color: var(--brand-blue); }
.title-red { color: var(--brand-red); }
.lede { max-width: 42rem; margin-top: 2rem; font-size: 1.125rem; color: var(--muted); line-height: 1.6; }
@media (min-width: 640px) { .lede { font-size: 1.25rem; } }

.form-wrap { max-width: 42rem; margin-top: 3rem; }
.form {
  display: flex; flex-direction: column; gap: .75rem;
  background: #fff8e3; border: 1px solid var(--brand-blue);
  border-radius: 1.5rem; padding: .75rem;
  box-shadow: 0 30px 60px -30px rgba(26,77,143,0.35);
}
@media (min-width: 640px) { .form { flex-direction: row; padding: 1rem; } }
.form input {
  border: none; background: transparent; outline: none;
  padding: 1.25rem; font-size: 1.125rem; color: var(--fg);
  border-radius: 1rem; width: 100%; font-family: inherit;
}
.form input::placeholder { color: var(--muted); }
@media (min-width: 640px) {
  .form input[type="text"] { width: 33%; }
  .form input[type="email"] { flex: 1; }
}
.form button, #shareBtn {
  background: var(--brand-red); color: #fff; border: none;
  border-radius: 1rem; padding: 1.25rem 1.75rem;
  font-size: 1rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .1em; cursor: pointer;
  transition: transform .15s ease;
  font-family: inherit;
}
.form button:hover, #shareBtn:hover { transform: scale(1.02); }
.form button:active, #shareBtn:active { transform: scale(.99); }
.form button:disabled { opacity: .6; cursor: not-allowed; }

.success {
  background: #fff8e3; border: 1px solid var(--brand-blue);
  border-radius: 1.5rem; padding: 2rem;
}
.success h2 {
  font-family: 'Fraunces', serif; color: var(--brand-blue);
  font-size: 2rem; margin: .5rem 0 .75rem;
}
@media (min-width: 640px) { .success h2 { font-size: 2.25rem; } }
.success p { color: var(--muted); margin: 0 0 .75rem; }
.success strong { color: var(--brand-blue); }
#shareBtn { margin-top: 1.5rem; padding: 1rem 1.75rem; }

.hint { margin-top: 1.25rem; font-size: .875rem; color: var(--muted); }
.hint-blue { color: var(--brand-blue); font-weight: 600; }

.footer {
  display: flex; flex-direction: column; gap: .75rem;
  align-items: flex-start; justify-content: space-between;
  border-top: 1px solid var(--border); padding-top: 1.5rem;
  font-family: 'JetBrains Mono', monospace; font-size: .7rem;
  text-transform: uppercase; letter-spacing: .2em; color: var(--muted);
}
@media (min-width: 640px) { .footer { flex-direction: row; align-items: center; } }

.toast {
  position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
  background: var(--brand-blue); color: #fff;
  padding: .875rem 1.25rem; border-radius: 9999px;
  font-size: .9rem; font-weight: 500;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.3);
  z-index: 50;
}
.toast.error { background: var(--brand-red); }