@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');

:root {
  --ak-ink: #15242b;
  --ak-paper: #f3f1e9;
  --ak-lime: #c8ff19;
  --ak-coral: #ff745b;
  --ak-line: rgba(21, 36, 43, .16);
}

html { min-height: 100%; background: var(--ak-paper); }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--ak-ink);
  background:
    radial-gradient(circle at 88% 10%, rgba(200,255,25,.72) 0 8rem, transparent 8.1rem),
    linear-gradient(135deg, transparent 0 72%, rgba(178,213,206,.5) 72% 100%),
    var(--ak-paper);
  font: 16px/1.55 "DM Sans", sans-serif;
}

.container { max-width: 720px; }
.wrap {
  margin-top: clamp(2rem, 7vh, 5rem);
  padding: clamp(1.5rem, 5vw, 3.5rem);
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 2px 34px 2px 34px;
  box-shadow: 0 28px 80px rgba(21,36,43,.13);
  backdrop-filter: blur(14px);
}

.header { margin-bottom: 2.5rem; border: 0; }
.logo img { width: 190px; max-height: 48px; object-fit: contain; object-position: left; }
h1, h2, h3 { font-family: Manrope, sans-serif; letter-spacing: -.045em; color: var(--ak-ink); }
section > h2 { font-size: clamp(2.25rem, 7vw, 4.6rem); line-height: .98; margin: 0 0 2.2rem; }
label { font-weight: 700; }
input[type="email"], input[type="text"] {
  width: 100%;
  padding: .95rem 1rem;
  color: var(--ak-ink);
  background: #fff;
  border: 1px solid var(--ak-line);
  border-radius: 10px;
  font: inherit;
  transition: border-color .2s, box-shadow .2s;
}
input:focus { border-color: var(--ak-ink); box-shadow: 0 0 0 4px rgba(200,255,25,.55); outline: none; }
.lists { padding: 1.2rem 1.35rem; background: rgba(243,241,233,.7); border-radius: 12px; }
.lists > h2 { font-size: 1rem; letter-spacing: 0; }
.description { color: #65716d; }
.button, button {
  padding: .9rem 1.35rem;
  color: var(--ak-ink);
  background: var(--ak-lime);
  border: 1px solid var(--ak-ink);
  border-radius: 999px;
  font: 800 1rem Manrope, sans-serif;
  box-shadow: 4px 4px 0 var(--ak-ink);
  transition: transform .15s, box-shadow .15s;
}
.button:hover, button:hover { transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--ak-ink); }
a { color: var(--ak-ink); text-decoration-color: var(--ak-coral); text-decoration-thickness: 2px; }
footer { padding: 1.5rem 1rem 3rem; color: #65716d; font-size: .78rem; text-align: center; }

@media (max-width: 760px) {
  body { padding: 0 1rem; }
  .wrap { margin-top: 1rem; border-radius: 2px 24px 2px 24px; }
  section > h2 { font-size: 2.5rem; }
}