:root {
  --blue: #005aef;
  --blue-light: #2a7bff;
  --blue-deep: #0040b8;
  --navy: #0b1b4d;
  --yellow: #ffc928;
  --deal-red: #c2410c;
  --white: #ffffff;
  --ink-soft: rgba(255, 255, 255, 0.85);
  --radius-card: 22px;
  --radius-pill: 999px;
  --gutter: 20px;
  --font-display: "Nunito", "Avenir Next", system-ui, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { background: var(--blue-deep); }

body {
  min-height: 100vh;
  font-family: var(--font-body);
  color: var(--white);
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(700px 520px at 90% 0%, rgba(42, 123, 255, 0.95), transparent 70%),
    radial-gradient(640px 520px at 0% 100%, rgba(0, 32, 120, 0.9), transparent 70%),
    var(--blue);
  background-attachment: fixed;
}

.page {
  max-width: 520px;
  margin: 0 auto;
  padding: 24px var(--gutter) 120px;
}

.brand { display: flex; align-items: center; gap: 12px; }
.logo { border-radius: 16px; background: var(--white); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25); }
.brand-name { font-family: var(--font-display); font-weight: 900; font-size: 22px; }
.brand-sub { font-size: 14px; color: var(--ink-soft); }

.hero { margin-top: 36px; }
h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(34px, 9vw, 46px);
  line-height: 1.05;
  letter-spacing: -0.5px;
}
h1 span { display: block; color: var(--yellow); }
.lead { margin-top: 16px; font-size: 18px; line-height: 1.5; color: var(--ink-soft); }

.join {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
  padding: 18px 24px;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, #ffd84d, var(--yellow) 55%, #ffb81f);
  color: var(--navy);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 21px;
  text-decoration: none;
  box-shadow: 0 10px 0 #d99a00, 0 18px 30px rgba(0, 0, 0, 0.3);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.join svg { width: 26px; height: 26px; }
.join:hover { transform: translateY(-2px); }
.join:active { transform: translateY(6px); box-shadow: 0 4px 0 #d99a00, 0 8px 16px rgba(0, 0, 0, 0.3); }
.join:focus-visible { outline: 3px solid var(--white); outline-offset: 4px; }

.fine { margin-top: 18px; text-align: center; font-size: 15px; color: var(--ink-soft); }

h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  margin-bottom: 14px;
}

.posts { margin-top: 48px; }
.post {
  background: var(--white);
  color: var(--navy);
  border-radius: var(--radius-card);
  padding: 16px 20px;
  margin-bottom: 12px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}
.post:nth-of-type(2) { transform: rotate(-1deg); }
.name { font-weight: 700; font-size: 16px; line-height: 1.3; }
.row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; }
.price { font-family: var(--font-display); font-weight: 900; font-size: 30px; }
.low { font-weight: 700; font-size: 14px; color: var(--deal-red); }
.note { font-size: 14px; color: var(--ink-soft); margin-top: 6px; }

.how { margin-top: 48px; }
.how ol { padding-left: 22px; font-size: 17px; line-height: 1.5; }
.how li + li { margin-top: 8px; }
.how p { margin-top: 14px; font-size: 15px; line-height: 1.5; color: var(--ink-soft); }

.final { margin-top: 36px; }

.footer {
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.footer p + p { margin-top: 8px; }

.sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  background: rgba(11, 27, 77, 0.92);
  backdrop-filter: blur(8px);
  transform: translateY(110%);
  transition: transform 200ms ease;
}
.sticky.is-visible { transform: translateY(0); }
.sticky .join { margin: 0 auto; max-width: 480px; padding: 14px 20px; font-size: 18px; box-shadow: 0 6px 0 #d99a00; }

@media (prefers-reduced-motion: reduce) {
  .join, .sticky { transition: none; }
}