/* Strona główna playanimato.com — stonowana paleta ilustracji (kość słoniowa, szarość, przygaszony fiolet). */
@font-face { font-family: "Golos Text"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/assets/GolosText-var-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Golos Text"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/assets/GolosText-var-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }

.home {
  --bg: #f7f4ee; --surface: #fffdf9; --ink: #23222a; --mut: #5d5b66; --line: #e6e0d6;
  --accent: #5a57a8; --accent-ink: #4a4796; --accent-soft: #ecebf6;
  font-family: "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  .home { --bg: #17161b; --surface: #201f26; --ink: #ecebf0; --mut: #a7a5b2; --line: #33313c;
    --accent: #a9a6ef; --accent-ink: #c4c2ff; --accent-soft: #2a2940; }
  .home img:not(.brand img) { filter: brightness(.94); }
}

/* Języki: widać tylko spany bieżącego języka (html[lang]). */
html[lang="pl"] [data-l="en"], html[lang="en"] [data-l="pl"] { display: none !important; }

.top { max-width: 1120px; margin: 0 auto; padding: 18px 16px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 20px; color: var(--ink); text-decoration: none; }
.brand img { border-radius: 9px; }
.lang { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; background: var(--surface); }
.lang button { font: inherit; font-size: 13px; font-weight: 600; border: 0; background: none; color: var(--mut); padding: 5px 12px; border-radius: 999px; cursor: pointer; }
.lang button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-ink); }

.home main { max-width: 1120px; margin: 0 auto; padding: 0 16px 56px; display: flex; flex-direction: column; gap: 72px; }
.home h1 { font-size: clamp(32px, 5.4vw, 54px); line-height: 1.08; letter-spacing: -0.02em; font-weight: 700; }
.home h2 { font-size: clamp(22px, 2.6vw, 28px); line-height: 1.2; margin: 0 0 10px; font-weight: 700; }
.home p { color: var(--mut); }
.home .eyebrow { color: var(--accent-ink); }

.hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px; align-items: center; padding-top: 12px; }
.hero .lede { font-size: 19px; line-height: 1.55; margin: 18px 0 26px; }
.hero-img { width: 100%; max-height: 640px; object-fit: cover; object-position: center 35%; border-radius: 28px; aspect-ratio: 4 / 5; }
.beta { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.beta p { margin: 0; font-size: 15px; }
.pill { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); background: var(--accent-soft); border-radius: 999px; padding: 4px 10px; }
.home .btn { background: var(--accent); border-radius: 12px; padding: 12px 22px; }
.home .btn:hover { filter: brightness(1.06); }
@media (prefers-color-scheme: dark) { .home .btn { color: #17161b !important; } }

.feat { display: flex; flex-direction: column; gap: 56px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.row.flip > img { order: 2; }
.row img { width: 100%; height: auto; border-radius: 22px; background: var(--surface); }
.row p { font-size: 17px; line-height: 1.6; margin: 0; }

.trust { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 28px clamp(18px, 4vw, 40px); }
.trust ul { margin: 6px 0 14px; padding-left: 20px; color: var(--mut); }
.trust li { margin-bottom: 8px; }
.trust p { margin: 0; }

.cta { display: grid; grid-template-columns: 200px 1fr; gap: 28px; align-items: center; }
.cta img { width: 100%; height: auto; border-radius: 50%; background: var(--surface); }
.cta p { margin: 0 0 8px; }

.home .foot { max-width: 1120px; margin: 0 auto; padding: 18px 16px 40px; }

@media (max-width: 760px) {
  .home main { gap: 48px; }
  .hero { grid-template-columns: 1fr; gap: 24px; }
  .hero-img { order: -1; aspect-ratio: 16 / 10; max-height: 300px; border-radius: 20px; }
  .row { grid-template-columns: 1fr; gap: 16px; }
  .row.flip > img { order: 0; }
  .cta { grid-template-columns: 1fr; justify-items: start; }
  .cta img { width: 120px; }
}
.beta .in { font-size: 14px; font-weight: 600; text-decoration: none; }
.beta .in:hover { text-decoration: underline; }