/* Choosy Goosy — "Staw" (pond) palette, shared by the landing page and the invite page. */
/* Latin + Latin Extended-A subsets (full Polish alphabet), see fonts/OFL-*.txt. */
@font-face { font-family: "Baloo 2"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("fonts/baloo2-latin.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("fonts/nunito-latin.woff2") format("woff2"); }

:root {
  --pond: #E8F4EF;
  --feather: #FFFFFF;
  --ink: #1F2A44;
  --ink-soft: #4A5672;
  --yolk: #FFD45C;
  --yolk-pale: #FFF1C9;
  --beak: #FF8A3D;
  --beak-text: #C25210;
  --grass: #1C7A50;
  --display: "Baloo 2", "Nunito", system-ui, sans-serif;
  --body: "Nunito", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--pond);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ink); }
a:hover { color: var(--beak-text); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 8px; }

.wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }

/* Header */
.site-header { padding: 20px 0; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; text-decoration: none; font-family: var(--display); font-weight: 700; font-size: 22px; }
.brand img { width: 40px; height: 40px; }
.oo { color: var(--beak-text); }
.header-nav { display: flex; align-items: center; gap: 8px; }
.lang, .header-cta { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; font-size: 15px; text-decoration: none; padding: 0 16px; border-radius: 999px; background: var(--feather); }
.header-cta { background: var(--ink); color: var(--feather); }
.header-cta:hover { color: var(--yolk); }

/* Hero */
.hero { padding: 24px 0 72px; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 48px; align-items: center; }
.eyebrow { display: inline-block; font-weight: 800; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; background: var(--yolk); border-radius: 999px; padding: 6px 14px; margin: 0 0 18px; }
h1, h2, h3 { font-family: var(--display); line-height: 1.08; margin: 0; }
h1 { font-weight: 700; font-size: clamp(40px, 6vw, 68px); letter-spacing: -1px; }
.lead { font-size: clamp(18px, 2vw, 21px); color: var(--ink-soft); max-width: 34em; margin: 20px 0 32px; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 60px; padding: 0 28px; border-radius: 999px;
  font-family: var(--display); font-weight: 600; font-size: 19px; text-decoration: none;
  background: var(--beak); color: var(--ink); border: 3px solid var(--ink); box-shadow: 0 6px 0 var(--ink);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover { color: var(--ink); transform: translateY(2px); box-shadow: 0 4px 0 var(--ink); }
.btn:active { transform: translateY(6px); box-shadow: 0 0 0 var(--ink); }
.btn-dark { background: var(--ink); color: var(--feather); }
.btn-dark:hover { color: var(--feather); }
.btn svg { width: 22px; height: 22px; flex: none; }
.note { font-size: 15px; color: var(--ink-soft); margin: 0; }

.hero-art { position: relative; aspect-ratio: 1 / 0.92; border-radius: 48% 48% 40px 40px; background: var(--feather); display: flex; align-items: flex-end; justify-content: center; }
.goose-anim { width: 64%; height: auto; margin: 0 12% 4% 0; overflow: visible; }
/* The goose speaks: a sticker bubble above its head, tail pointing down-left at the beak. */
.bubble {
  position: absolute; top: 9%; right: 7%; max-width: 62%; margin: 0;
  font-family: var(--display); font-weight: 600; font-size: clamp(18px, 2.4vw, 24px); line-height: 1.2;
  background: var(--feather); border: 3px solid var(--ink); border-radius: 24px 24px 24px 6px; padding: 12px 18px;
  box-shadow: 0 5px 0 var(--ink);
  transform-origin: 0 100%;
  animation: bubble 8s ease-in-out infinite;
}

/*
 * The goose, one 8 s loop: it honks (neck forward, beak open twice, wing flick, bubble pops),
 * shuffles its feet, blinks, then tilts its head up curiously. Body and shadow breathe on their
 * own 3 s cycle so the loop never looks mechanical. Pivots are in the SVG's 200×200 viewBox.
 */
.goose-anim * { transform-box: view-box; }
.g-body { transform-origin: 112px 180px; animation: g-breathe 3s ease-in-out infinite; }
.g-shadow { transform-origin: 112px 190px; animation: g-shadow 3s ease-in-out infinite; }
.g-head { transform-origin: 80px 138px; animation: g-head 8s ease-in-out infinite; }
.g-beak-low { transform-origin: 54px 56px; animation: g-beak 8s ease-in-out infinite; }
.g-eye { transform-origin: 70px 44px; animation: g-blink 8s linear infinite; }
.g-wing { transform-origin: 100px 132px; animation: g-wing 8s ease-in-out infinite; }
.g-foot-l { transform-origin: 99px 194px; animation: g-step-l 8s ease-in-out infinite; }
.g-foot-r { transform-origin: 131px 194px; animation: g-step-r 8s ease-in-out infinite; }

@keyframes g-breathe { 0%, 100% { transform: translateY(0) scaleY(1); } 50% { transform: translateY(-2px) scaleY(1.015); } }
@keyframes g-shadow { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.95); } }
@keyframes g-head {
  0%, 4% { transform: rotate(0deg); }
  8% { transform: rotate(-11deg); }
  11% { transform: rotate(-7deg); }
  14% { transform: rotate(-11deg); }
  21%, 42% { transform: rotate(0deg); }
  48%, 58% { transform: rotate(8deg); }
  52% { transform: rotate(6deg); }
  65%, 100% { transform: rotate(0deg); }
}
@keyframes g-beak { 0%, 7%, 11%, 15%, 100% { transform: rotate(0deg); } 9%, 13% { transform: rotate(22deg); } }
@keyframes g-blink { 0%, 30%, 33%, 80%, 83%, 100% { transform: scaleY(1); } 31.5%, 81.5% { transform: scaleY(.1); } }
@keyframes g-wing { 0%, 6%, 12%, 17%, 100% { transform: rotate(0deg); } 9% { transform: rotate(-14deg); } 14% { transform: rotate(-8deg); } }
@keyframes g-step-l { 0%, 18%, 23%, 100% { transform: translateY(0) rotate(0deg); } 20.5% { transform: translateY(-5px) rotate(-8deg); } }
@keyframes g-step-r { 0%, 23%, 28%, 100% { transform: translateY(0) rotate(0deg); } 25.5% { transform: translateY(-5px) rotate(-8deg); } }
@keyframes bubble {
  0%, 7% { opacity: 0; transform: scale(.6); }
  10% { opacity: 1; transform: scale(1.06); }
  12%, 68% { opacity: 1; transform: scale(1); }
  73%, 100% { opacity: 0; transform: scale(.85); }
}
@media (prefers-reduced-motion: reduce) {
  .goose-anim *, .bubble { animation: none; }
}

/*
 * "Coming soon" store badges, styled after the stores' download buttons (black, hairline border,
 * brand mark, two-line label). Not the official badge artwork: that may only point at a live listing.
 */
.stores { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.store-badge {
  display: inline-flex; align-items: center; gap: 10px;
  height: 52px; padding: 0 18px 0 14px; border-radius: 12px;
  background: #000; color: #fff; border: 1.5px solid #A6A6A6;
}
.store-icon { width: 26px; height: 26px; flex: none; }
.store-text { display: flex; flex-direction: column; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-weight: 600; font-size: 19px; line-height: 1.05; letter-spacing: -.2px; white-space: nowrap; }
.store-text small { font-weight: 500; font-size: 10.5px; letter-spacing: .4px; text-transform: uppercase; }

/* Sections */
section { padding: 72px 0; }
.section-title { font-weight: 600; font-size: clamp(30px, 4vw, 44px); margin-bottom: 12px; }
.section-lead { color: var(--ink-soft); max-width: 40em; margin: 0 0 36px; font-size: 18px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.step { background: var(--feather); border-radius: 28px; padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.step-num { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--yolk); border: 3px solid var(--ink); font-family: var(--display); font-weight: 700; font-size: 24px; line-height: 1; }
.step h3 { font-weight: 600; font-size: 26px; }
.step p { margin: 0; color: var(--ink-soft); }

.band { background: var(--feather); }
.band .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.chips li { font-family: var(--display); font-weight: 500; font-size: 19px; background: var(--pond); border-radius: 999px; padding: 10px 18px; }
.chips li:nth-child(3n+1) { background: var(--yolk-pale); }
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.facts li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: start; }
.facts svg { width: 36px; height: 36px; }
.facts strong { display: block; font-size: 18px; }
.facts span { color: var(--ink-soft); }

/* FAQ: native disclosure widgets, no script. */
.faq-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; align-items: start; }
.faq-item { background: var(--feather); border-radius: 22px; padding: 0 22px; }
.faq-item summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; font-family: var(--display); font-weight: 600; font-size: 19px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--yolk); font-size: 22px; line-height: 1; transition: transform .2s ease; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { margin: 0 0 20px; color: var(--ink-soft); }

/* Download + install */
.download-card { background: var(--feather); border: 3px solid var(--ink); border-radius: 36px; padding: clamp(24px, 4vw, 48px); display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 40px; align-items: start; }
.download-goose { width: 200px; }
.install-steps { margin: 0 0 32px; padding: 0; list-style: none; counter-reset: step; display: grid; gap: 14px; }
.install-steps li { counter-increment: step; position: relative; min-height: 36px; padding: 5px 0 0 48px; color: var(--ink-soft); }
.install-steps li::before { content: counter(step); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--yolk); color: var(--ink); font-family: var(--display); font-weight: 700; }
.install-steps strong { color: var(--ink); }

.site-footer { padding: 32px 0 48px; color: var(--ink-soft); font-size: 15px; }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; border-top: 2px solid rgba(31, 42, 68, .12); padding-top: 24px; }

/* Long-form text pages (privacy policy) */
.prose-page { padding: 16px 0 56px; }
.prose { max-width: 760px; }
.prose h1 { font-size: clamp(36px, 6vw, 52px); margin-bottom: 8px; }
.prose h2 { font-weight: 600; font-size: clamp(24px, 3.4vw, 30px); margin: 44px 0 12px; }
.prose h3 { font-weight: 600; font-size: 20px; margin: 24px 0 8px; }
.prose p, .prose li { color: var(--ink-soft); }
.prose strong { color: var(--ink); }
.prose ul { padding-left: 22px; margin: 0 0 12px; }
.prose li { margin-bottom: 8px; }
.prose .meta { font-size: 15px; margin: 0 0 24px; }
.prose .summary { background: var(--feather); border: 3px solid var(--ink); border-radius: 24px; padding: 20px 24px; color: var(--ink); font-size: 18px; }
.prose a { overflow-wrap: anywhere; }

/* Invite page */
.join { min-height: 100vh; display: flex; flex-direction: column; }
.join main { flex: 1; display: flex; align-items: center; padding: 24px 0 48px; }
.join-card { width: min(520px, 100%); margin-inline: auto; background: var(--feather); border-radius: 36px; padding: 36px 28px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.join-card img { width: 120px; }
.join-card p { margin: 0; }
.join-card h1 { font-size: clamp(30px, 6vw, 40px); }
.code { font-family: var(--display); font-weight: 700; font-size: 40px; letter-spacing: 6px; background: var(--yolk-pale); border-radius: 20px; padding: 8px 20px; }
.join-card .btn { width: 100%; }
.join-card .steps-small { text-align: left; color: var(--ink-soft); margin: 0; padding-left: 22px; }

@media (max-width: 860px) {
  .hero .wrap, .band .wrap { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .hero-art { max-width: 460px; width: 100%; justify-self: center; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .download-card { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .faq-list { grid-template-columns: minmax(0, 1fr); }
  .download-goose { width: 120px; }
  section { padding: 56px 0; }
}

@media (max-width: 520px) {
  body { font-size: 16px; }
  .brand { font-size: 19px; }
  .brand img { width: 34px; height: 34px; }
  .lang { padding: 0 12px; }
  .hero { padding-bottom: 48px; }
  .cta-row .btn { width: 100%; }
  .step, .download-card { border-radius: 24px; }
}