@font-face { font-family: Nunito; font-weight: 600; font-display: swap; src: url(/fonts/nunito-600.woff2) format("woff2"); }
@font-face { font-family: Nunito; font-weight: 800; font-display: swap; src: url(/fonts/nunito-800.woff2) format("woff2"); }
@font-face { font-family: "Lilita One"; font-display: swap; src: url(/fonts/lilita-one.woff2) format("woff2"); }

/* Brand tokens (lib/app/theme/tokens.dart). */
:root { --bg-top: #3A1FA6; --bg-mid: #4B2BC2; --bg-bottom: #117C92; --orange: #FF8A1F; --orange-deep: #E5600A; --sunny: #FFD23F; --ink: #1B1240; --grid: rgba(255,255,255,.09); --tile: rgba(0,0,0,.26); color-scheme: dark; }
@media (prefers-color-scheme: dark) { :root { --bg-top: #1A1050; --bg-mid: #221567; --bg-bottom: #0B4A5A; } }
* { box-sizing: border-box; }
html { background: var(--bg-bottom); }
body {
  margin: 0; min-height: 100vh; color: #fff; display: flex; flex-direction: column;
  background:
    linear-gradient(var(--grid) 1px, transparent 1px) 0 16px / 32px 32px,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) center 0 / 32px 32px,
    linear-gradient(170deg, var(--bg-top), var(--bg-mid) 45%, var(--bg-bottom));
  background-color: var(--bg-bottom);
  font: 600 18px/1.55 Nunito, system-ui, sans-serif;
}
a { color: var(--sunny); }
main { flex: 1; width: 100%; max-width: 640px; margin: 0 auto; padding: 16px 20px 40px; }
h1, .brand { font-family: "Lilita One", Nunito, sans-serif; font-weight: 400; text-shadow: 0 0 2px rgba(27,15,85,.7), 0 3px 4px rgba(0,0,0,.3); }
h1 { font-size: clamp(40px, 10vw, 64px); line-height: 1.05; margin: .4em 0 .3em; }
.top { display: flex; justify-content: center; padding: 14px; }
.brand { color: #fff; text-decoration: none; font-size: 30px; }
.brand span { color: var(--sunny); }
.hero { text-align: center; }
.lead { font-size: 20px; opacity: .92; }
.join { background: var(--tile); border: 1px solid rgba(255,255,255,.18); border-radius: 24px; padding: 18px; margin: 28px 0 12px; }
.join label { display: block; font-weight: 800; margin-bottom: 10px; }
.join .row { display: flex; gap: 10px; }
.join input { flex: 1; min-width: 0; border-radius: 16px; border: 3px solid transparent; padding: 10px 14px; font: 400 30px "Lilita One", sans-serif; letter-spacing: .25em; text-align: center; text-transform: uppercase; color: var(--ink); background: #fff; }
.join input:focus { outline: none; border-color: var(--sunny); }
button, .button { border: 2px solid rgba(255,255,255,.65); border-radius: 999px; padding: 12px 26px; font: 800 20px Nunito, sans-serif; color: var(--ink); background: linear-gradient(#FFA347, var(--orange)); box-shadow: 0 5px 0 var(--orange-deep); cursor: pointer; text-decoration: none; display: inline-block; }

.legal { background: var(--tile); border-radius: 24px; padding: 8px 22px 18px; }
.legal h1 { font-size: 40px; }
.foot { text-align: center; font-size: 14px; padding: 20px; opacity: .85; }
.foot nav { display: flex; justify-content: center; gap: 18px; margin-bottom: 6px; }
.foot a { color: #fff; }
:focus-visible { outline: 3px solid var(--sunny); outline-offset: 2px; }
.hero-owl { display: block; margin: 8px auto 0; width: 160px; height: 160px; filter: drop-shadow(0 10px 18px rgba(0,0,0,.3)); animation: bob 2.8s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-8px) rotate(-2deg); } }
.chips { list-style: none; padding: 0; margin: 18px 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.chips li { background: var(--tile); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 6px 14px; font-size: 15px; font-weight: 800; }
.cta { margin: 22px 0 8px; }
.cta .button { font-size: 22px; padding: 14px 40px; }
.join .hint { margin: 10px 0 0; font-size: 14px; opacity: .8; }
.join input:invalid:not(:placeholder-shown) { border-color: #FF8FA3; }
.how { margin-top: 30px; }
.how h2 { font-family: "Lilita One", Nunito, sans-serif; font-weight: 400; font-size: 30px; text-align: center; margin: 0 0 12px; }
.how ol { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.how li { display: flex; gap: 12px; align-items: center; background: var(--tile); border-radius: 18px; padding: 12px 16px; }
.how li span { font-size: 30px; flex: none; }
.how li p { margin: 0; }
.how li b { color: var(--sunny); margin-right: 4px; }
.safe { text-align: center; font-size: 15px; opacity: .85; margin-top: 16px; }
@media (prefers-reduced-motion: reduce) { .hero-owl { animation: none; } }