/* Gang Brokuła: strona w stylu gry. Kolory z lib/game/art.dart, przyciski jak ChunkyButton. */

@font-face { font-family: Inter; font-style: italic; font-weight: 900; font-display: swap; src: url(../fonts/inter-blackitalic.woff2) format("woff2"); }
@font-face { font-family: Inter; font-style: normal; font-weight: 800; font-display: swap; src: url(../fonts/inter-extrabold.woff2) format("woff2"); }
@font-face { font-family: Inter; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/inter-bold.woff2) format("woff2"); }

:root {
  --ink: #1B1430;
  --ink-2: #221A40;
  --ink-3: #2E2357;
  --night: #140E2A;
  --deep: #0F0A20;
  --zolty: #FFD60A;
  --zolty-dark: #B89400;
  --pink: #FF2D78;
  --cyan: #29E7FF;
  --green: #4DB33D;
  --green-dark: #2C7D2B;
  --green-light: #8BE36B;
  --lime: #9CFF3C;
  --amber: #FFB627;
  --off: #6F6A80;
  --text: #F6F2FF;
  --muted: #BDB3DE;
  --paper: #FFFDF6;
  --display: Inter, "Arial Black", system-ui, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --gutter: 16px;
  --wrap: 1180px;
  --outline: 0 3px 0 var(--ink), 2px 2px 0 var(--ink), -2px 2px 0 var(--ink), 2px -2px 0 var(--ink), -2px -2px 0 var(--ink), 3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 -3px 0 var(--ink);
  --outline-big: 0 6px 0 var(--ink), 3px 3px 0 var(--ink), -3px 3px 0 var(--ink), 3px -3px 0 var(--ink), -3px -3px 0 var(--ink), 4px 0 0 var(--ink), -4px 0 0 var(--ink), 0 -4px 0 var(--ink), 4px 5px 0 var(--ink), -4px 5px 0 var(--ink);
  color-scheme: dark;
}
@media (min-width: 600px) { :root { --gutter: 24px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; background: var(--night); color: var(--text); font: 400 1.0625rem/1.6 var(--body); overflow-x: hidden; }
img, video, svg { max-width: 100%; display: block; }
img { height: auto; }
a { color: var(--cyan); text-underline-offset: 3px; }
a:hover { color: #fff; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; line-height: 1.1; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--zolty); color: var(--ink); padding: 10px 16px; border-radius: 10px; font: 800 1rem var(--display); }
.skip:focus { top: 12px; }
.ico { width: 1.2em; height: 1.2em; flex: none; }
mark.todo { background: var(--zolty); color: var(--ink); padding: 0 .3em; border-radius: 4px; font-weight: 700; outline: 2px dashed var(--pink); }

/* Typografia jak w grze: grube kursywy z konturem. */
.title { font: italic 900 clamp(2rem, 7vw, 3.5rem)/1.02 var(--display); text-transform: uppercase; color: var(--zolty); letter-spacing: -.01em; text-shadow: var(--outline-big); margin-bottom: .45em; }
.title--small { font-size: clamp(1.7rem, 5vw, 2.5rem); }
.subtitle { font: italic 900 1.4rem/1.1 var(--display); text-transform: uppercase; color: #fff; text-shadow: var(--outline); margin: 1.6em 0 .7em; }
.kicker { font: 800 .85rem/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); margin-bottom: .9em; }
.lead { font-size: 1.15rem; color: #fff; }
.note { display: flex; gap: .55em; align-items: flex-start; color: var(--muted); font-size: .95rem; }
.note .ico { color: var(--green-light); margin-top: .2em; }
.more { display: inline-flex; align-items: center; gap: .4em; font: 800 1rem var(--display); color: var(--zolty); text-decoration: none; }
.more:hover { color: #fff; gap: .6em; }
.more-row { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 28px; }
.linkish { background: none; border: 0; padding: 0; color: var(--cyan); cursor: pointer; display: inline-flex; align-items: center; gap: .35em; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.linkish:hover { color: #fff; }

/* Przyciski jak ChunkyButton: ramka 4px, cień 6px, wciśnięcie w dół. */
.btn { --bg: var(--zolty); --fg: var(--ink); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 58px; padding: .55em 1.3em; background: var(--bg); color: var(--fg); border: 4px solid var(--ink); border-radius: 14px; box-shadow: 0 6px 0 var(--ink); font: italic 900 1.25rem/1 var(--display); letter-spacing: -.01em; text-transform: uppercase; text-decoration: none; cursor: pointer; overflow: hidden; transition: transform 60ms, box-shadow 60ms, filter .15s; -webkit-tap-highlight-color: transparent; }
.btn:hover { color: var(--fg); filter: brightness(1.06); }
.btn:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--ink); }
.btn--small { min-height: 44px; font-size: 1rem; padding: .45em 1em; border-width: 3px; box-shadow: 0 4px 0 var(--ink); border-radius: 12px; }
.btn--small:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.btn--cyan { --bg: var(--cyan); }
.btn--pink { --bg: var(--pink); --fg: #fff; }
.btn--amber { --bg: var(--amber); }
.btn--green { --bg: var(--green-light); }
.btn--ghost { --bg: var(--ink-3); --fg: #fff; }
.btn--off { --bg: var(--off); --fg: #E7E3F2; cursor: default; box-shadow: 0 6px 0 var(--ink); }
.btn--off:active { transform: none; box-shadow: 0 6px 0 var(--ink); }
.btn__ico { width: 1.5em; height: 1.5em; }
.btn__two { display: flex; flex-direction: column; align-items: flex-start; text-align: left; line-height: 1; }
.btn__two small { font: 800 .62em/1.2 var(--display); letter-spacing: .04em; text-transform: none; font-style: normal; }
.btn--store { min-width: 210px; justify-content: flex-start; font-size: 1.35rem; }
/* Połysk na podpowiadanym kroku, jak ShineSweep w grze. */
.btn--shine::after { content: ""; position: absolute; inset: -4px; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.75) 47%, rgba(255,255,255,.2) 53%, transparent 62%); transform: translateX(-120%); animation: shine 3.2s ease-in-out infinite; pointer-events: none; }
@keyframes shine { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.stores { display: flex; flex-wrap: wrap; gap: 16px 14px; }
.store-badge img { height: 56px; width: auto; }

/* Górny pasek */
.topbar { position: sticky; top: 0; z-index: 50; background: rgba(20, 14, 42, .86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 3px solid var(--ink); }
.topbar__in { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); height: 64px; display: flex; align-items: center; gap: 16px; }
.topbar__logo { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font: italic 900 1.15rem var(--display); text-transform: uppercase; margin-right: auto; }
.topbar__icon { width: 40px; height: 40px; border-radius: 11px; border: 3px solid var(--ink); box-shadow: 0 3px 0 var(--ink); }
.topbar__nav { display: none; gap: 4px; }
.topbar__nav a { color: #fff; text-decoration: none; font: 800 .98rem var(--display); padding: 8px 12px; border-radius: 10px; }
.topbar__nav a:hover, .topbar__nav a[aria-current] { background: var(--ink-3); color: var(--zolty); }
.topbar__cta { min-height: 40px; }
.menu { position: relative; }
.menu summary { list-style: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--ink-3); border: 3px solid var(--ink); cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary .ico { width: 24px; height: 24px; }
.menu__panel { position: absolute; right: 0; top: 54px; min-width: 220px; background: var(--ink-2); border: 4px solid var(--zolty); border-radius: 18px; box-shadow: 0 8px 0 var(--ink); padding: 10px; display: grid; }
.menu__panel a { color: #fff; text-decoration: none; font: 800 1.05rem var(--display); padding: 12px 14px; border-radius: 10px; }
.menu__panel a:hover, .menu__panel a[aria-current] { background: var(--ink-3); color: var(--zolty); }
@media (min-width: 900px) {
  .topbar__nav { display: flex; }
  .menu { display: none; }
}
@media (max-width: 380px) { .topbar__logo span { display: none; } }

/* Niebo o zmierzchu z promieniami, gwiazdkami i słońcem w paski. */
.sky { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(180deg, #170C38 0%, #2E1262 30%, #5D1A85 58%, #A72A86 80%, #E5527A 94%, #FF8A5C 100%); pointer-events: none; }
.sky__rays { position: absolute; left: 50%; top: 70%; width: 260vmax; height: 260vmax; transform: translate(-50%, -50%); background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.07) 0deg 7deg, transparent 7deg 18deg); -webkit-mask: radial-gradient(circle, #000 0 18%, transparent 46%); mask: radial-gradient(circle, #000 0 18%, transparent 46%); animation: spin 120s linear infinite; }
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.sky__stars { position: absolute; inset: 0 0 35% 0; background-image: radial-gradient(2px 2px at 10% 20%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 30% 8%, #fff 50%, transparent 51%), radial-gradient(2px 2px at 55% 15%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 72% 30%, #fff 50%, transparent 51%), radial-gradient(2px 2px at 88% 12%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 20% 45%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 92% 48%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 42% 38%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 64% 52%, #fff 50%, transparent 51%); opacity: .75; animation: twinkle 4s ease-in-out infinite alternate; }
@keyframes twinkle { to { opacity: .45; } }
.sky__sun { position: absolute; left: 50%; bottom: 60px; width: min(78vw, 640px); aspect-ratio: 1; transform: translate(-50%, 50%); border-radius: 50%; background: linear-gradient(180deg, #FFE27A 0%, #FFC266 45%, #FF8E5E 100%); -webkit-mask: linear-gradient(#000 0 50%, transparent 50%), repeating-linear-gradient(180deg, #000 0 14px, transparent 14px 22px); mask: linear-gradient(#000 0 50%, transparent 50%), repeating-linear-gradient(180deg, #000 0 14px, transparent 14px 22px); opacity: .95; }
.sparkle { position: absolute; width: 26px; filter: drop-shadow(0 0 6px rgba(255,255,255,.8)); animation: sparkle 2.6s ease-in-out infinite; }
.sparkle--1 { left: 8%; top: 14%; }
.sparkle--2 { right: 10%; top: 22%; width: 18px; animation-delay: .8s; }
.sparkle--3 { left: 46%; top: 6%; width: 14px; animation-delay: 1.5s; }
.sparkle--a { left: 6%; top: 18%; }
.sparkle--b { right: 8%; top: 30%; width: 18px; animation-delay: 1s; }
@keyframes sparkle { 0%, 100% { transform: scale(.6) rotate(0); opacity: .5; } 50% { transform: scale(1.1) rotate(20deg); opacity: 1; } }
.broc { position: absolute; width: 64px; filter: drop-shadow(0 0 0 #fff) drop-shadow(0 6px 0 rgba(15,10,32,.35)); animation: float 6s ease-in-out infinite; }
.broc--1 { left: 4%; top: 30%; width: 56px; transform: rotate(-18deg); }
.broc--2 { right: 5%; top: 12%; width: 72px; animation-delay: -2s; }
.broc--3 { right: 30%; top: 4%; width: 44px; animation-delay: -4s; }
.broc--a { left: 4%; bottom: 20%; }
.broc--b { right: 6%; top: 12%; width: 48px; animation-delay: -3s; }
@keyframes float { 0%, 100% { translate: 0 0; rotate: -8deg; } 50% { translate: 0 -14px; rotate: 6deg; } }
.skyline { position: absolute; left: 0; right: 0; bottom: 0; height: 150px; background: url(../img/osiedle.svg) repeat-x bottom center / auto 150px; pointer-events: none; }
.skyline::after { content: ""; position: absolute; inset: auto 0 0; height: 40px; background: linear-gradient(transparent, var(--night)); }

/* Hero */
.hero { position: relative; overflow: hidden; padding: 28px 0 150px; isolation: isolate; }
.hero__in { position: relative; z-index: 1; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); display: grid; gap: 28px; }
.hero__text { text-align: center; display: grid; justify-items: center; }
.hero__logo { width: min(100%, 520px); margin: 0 0 6px; filter: drop-shadow(0 10px 0 rgba(15,10,32,.35)); }
.hero__logo img { width: 100%; animation: pop .7s cubic-bezier(.2, 1.6, .4, 1) both; }
/* Bez przezroczystości na starcie: gdy animacja stanie (karta w tle, podgląd linku), logo i tak jest widać. */
@keyframes pop { from { transform: scale(.7) rotate(-4deg); } 60% { transform: scale(1.06) rotate(1deg); } to { transform: none; } }
.hero__tagline { font: italic 900 clamp(1.15rem, 4.6vw, 1.75rem)/1.1 var(--display); text-transform: uppercase; color: #fff; text-shadow: var(--outline); margin-bottom: .8em; }
.hero__lead { max-width: 34em; font-size: 1.1rem; color: #fff; text-shadow: 0 2px 10px rgba(15,10,32,.6); }
.hero .stores { justify-content: center; }
.hero__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin: 16px 0 0; color: #fff; font-weight: 600; font-size: .95rem; text-shadow: 0 1px 6px rgba(15,10,32,.8); }
.hero__meta .linkish { color: #fff; }
.hero__stage { position: relative; display: grid; justify-items: center; padding: 10px 0 0; min-height: 520px; }
.phone { position: relative; width: min(280px, 64vw); padding: 9px; background: #0B0816; border: 4px solid var(--ink); border-radius: 46px; box-shadow: inset 0 0 0 3px #3B2B70, 0 14px 0 -2px rgba(15,10,32,.6), 0 30px 60px rgba(8,4,20,.55); }
/* Ekran ma dokładnie proporcje nagrań z gry, więc nic nie jest ucięte po bokach. */
.phone__screen { position: relative; aspect-ratio: 600 / 1304; border-radius: 36px; overflow: hidden; background: #000; }
.phone__screen--video { aspect-ratio: 592 / 1282; }
.phone__screen::before { content: ""; position: absolute; z-index: 2; top: 10px; left: 50%; width: 30%; height: 22px; transform: translateX(-50%); background: #000; border-radius: 20px; }
.phone__screen img, .phone__screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.phone--hero { z-index: 1; rotate: 3deg; }
.phone__sound { position: absolute; z-index: 3; right: 12px; bottom: 14px; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; border: 3px solid var(--ink); background: var(--zolty); color: var(--ink); box-shadow: 0 4px 0 var(--ink); cursor: pointer; }
.phone__sound .ico { width: 24px; height: 24px; }
.phone__sound .ico--on, .phone__sound[aria-pressed="true"] .ico--off { display: none; }
.phone__sound[aria-pressed="true"] .ico--on { display: block; }
.sticker { position: absolute; margin: 0; z-index: 2; }
.sticker img, img.sticker { filter: drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(0 10px 0 rgba(15,10,32,.45)); }
.sticker--mama { left: -4px; bottom: 30px; width: 38%; max-width: 230px; }
.sticker--tata { right: -4px; bottom: 0; width: 36%; max-width: 220px; }
.sticker--kot { left: 50%; bottom: -30px; width: 84px; translate: -150% 0; }
.sticker--mama img { animation: wobble 5s ease-in-out infinite; transform-origin: bottom center; }
.sticker--tata img { animation: wobble 5s ease-in-out -2.5s infinite; transform-origin: bottom center; }
@keyframes wobble { 0%, 100% { rotate: -2deg; } 50% { rotate: 3deg; } }

/* Dymki z ogonkiem w stronę mówiącego, jak SpeechCloud w grze. */
.cloud { position: relative; margin: 0; background: #fff; color: var(--ink); border: 4px solid var(--ink); border-radius: 20px; padding: .55em .8em; box-shadow: 0 5px 0 var(--ink); font: 800 .95rem/1.2 var(--display); }
.cloud::before, .cloud::after { content: ""; position: absolute; border: solid transparent; }
.cloud::before { border-width: 16px 12px 0 12px; border-top-color: var(--ink); bottom: -20px; left: 22px; }
.cloud::after { border-width: 11px 8px 0 8px; border-top-color: #fff; bottom: -11px; left: 26px; }
.sticker .cloud { position: absolute; bottom: 100%; margin-bottom: 18px; width: max-content; max-width: 210px; }
.cloud--mama { left: 0; font-style: italic; font-weight: 900; text-transform: uppercase; animation: bounce-in .5s .6s both; }
.cloud--tata { right: 0; animation: bounce-in .5s 1.6s both; }
.cloud--tata::before { left: auto; right: 26px; }
.cloud--tata::after { left: auto; right: 30px; }
.cloud--down { margin: 0 auto 22px; max-width: 260px; text-align: center; }
.cloud--down::before { left: calc(50% - 12px); }
.cloud--down::after { left: calc(50% - 8px); }
@keyframes bounce-in { from { transform: scale(.4); } 70% { transform: scale(1.08); } to { transform: none; } }

@media (min-width: 600px) {
  .hero__stage { min-height: 600px; }
  .phone { width: 290px; }
  .sticker--mama { left: 2%; bottom: 60px; }
  .sticker--tata { right: 2%; bottom: 20px; }
}
@media (min-width: 960px) {
  .hero { padding: 48px 0 170px; }
  .hero__in { grid-template-columns: 1.05fr 1fr; align-items: center; gap: 24px; }
  .hero__text { text-align: left; justify-items: start; }
  .hero .stores, .hero__meta { justify-content: flex-start; }
  .hero__stage { min-height: 640px; }
  .sticker--mama { left: -4%; }
  .sticker--tata { right: -4%; }
}

/* Banery z trasy przewijane jak w grze */
.ticker { overflow: hidden; background: var(--ink); border-block: 4px solid var(--deep); padding: 16px 0; position: relative; z-index: 2; }
.ticker__track { display: flex; width: max-content; animation: ticker 70s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__list { display: flex; gap: 18px; padding: 0 18px 0 0; margin: 0; list-style: none; }
@keyframes ticker { to { transform: translateX(-50%); } }
.billboard { position: relative; display: inline-block; white-space: nowrap; padding: .75em 2.4em .75em 1.3em; background: radial-gradient(circle, rgba(27,20,48,.13) 1.3px, transparent 1.7px) 0 0 / 9px 9px, linear-gradient(100deg, #FFD60A 0%, #FFE45C 55%, #FFD60A 100%); color: var(--ink); border: 4px solid var(--ink); border-radius: 6px; box-shadow: 0 5px 0 #0B0816; font: 800 .95rem/1 var(--display); letter-spacing: .07em; }
.billboard::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 26px; height: 26px; background: linear-gradient(135deg, transparent 0 48%, #fff 48% 55%, var(--pink) 55%); }
.billboard--big { font-size: 1.2rem; margin-bottom: 26px; }

/* Liczniki jak HUD w trakcie jazdy */
.hud { background: linear-gradient(180deg, var(--ink-2), var(--night)); padding: 34px 0 26px; }
.hud__list { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 0; text-align: center; }
.hud__list li { flex: 0 0 33.33%; }
@media (min-width: 700px) { .hud__list li { flex-basis: 20%; } }
.hud__num { display: block; font: italic 900 clamp(2.6rem, 9vw, 4rem)/1 var(--display); color: var(--zolty); text-shadow: var(--outline-big); }
.hud__label { display: block; margin-top: 8px; font: 800 .9rem/1.1 var(--display); text-transform: uppercase; letter-spacing: .05em; color: #fff; text-shadow: var(--outline); }

/* Sekcje */
.section { position: relative; padding: clamp(56px, 9vw, 104px) 0; }
.section--alt { background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(110, 60, 200, .28), transparent 70%), #1A1236; }
.section__in { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); position: relative; }
.section__head { max-width: 760px; margin-bottom: 36px; }
.narrow { max-width: 820px; }
.split { display: grid; gap: 40px; align-items: center; }
.split__text { order: -1; }
.split__media { position: relative; display: grid; justify-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: 64px; }
  .split__text { order: 0; }
}
.phone--tilt { rotate: -4deg; }
.broc--side { right: 6%; top: 8%; width: 70px; }

/* Gesty z samouczka */
.gestures { list-style: none; margin: 22px 0; padding: 0; display: grid; gap: 14px; }
.gesture { display: flex; gap: 16px; align-items: center; background: var(--ink-2); border: 3px solid var(--ink-3); border-radius: 18px; padding: 12px 16px 12px 12px; }
.gesture strong { display: block; font: italic 900 1.1rem var(--display); text-transform: uppercase; color: var(--zolty); }
.gesture__demo { position: relative; flex: none; width: 62px; height: 62px; border-radius: 16px; background: var(--ink); border: 3px solid var(--ink-3); overflow: hidden; }
.gesture__demo span { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.25), 0 0 14px var(--cyan); }
.gesture__demo--side span { animation: g-side 1.8s ease-in-out infinite; }
.gesture__demo--up span { animation: g-up 1.6s ease-in-out infinite; }
.gesture__demo--down span { animation: g-down 2s ease-in-out infinite; }
.gesture__demo--hold span { animation: g-hold 2.6s ease-in-out infinite; }
@keyframes g-side { 0%, 15% { translate: -14px 0; } 45%, 60% { translate: 14px 0; } 90%, 100% { translate: -14px 0; } }
@keyframes g-up { 0%, 15% { translate: 0 14px; opacity: 1; } 55% { translate: 0 -16px; opacity: 1; } 75%, 100% { translate: 0 -16px; opacity: 0; } }
@keyframes g-down { 0%, 10% { translate: 0 -14px; } 40%, 85% { translate: 0 12px; background: var(--zolty); } 100% { translate: 0 -14px; } }
@keyframes g-hold { 0% { translate: -12px 10px; } 25% { translate: 12px 10px; } 50% { translate: 12px -12px; } 75% { translate: -12px -12px; } 100% { translate: -12px 10px; } }
.gestures--big .gesture { padding: 16px 18px 16px 14px; }

/* Karta zadań jak „TWOJE ZADANIA” w grze */
.taskcard { width: min(100%, 440px); background: var(--ink-2); border: 6px solid var(--zolty); border-radius: 30px; box-shadow: 0 10px 0 var(--ink); padding: 26px 26px 30px; rotate: -2deg; animation: hover 5s ease-in-out infinite; }
@keyframes hover { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.taskcard__title { text-align: center; font: italic 900 clamp(1.8rem, 6vw, 2.3rem)/1 var(--display); text-transform: uppercase; color: var(--zolty); text-shadow: var(--outline-big); margin-bottom: 22px; }
.taskcard__list { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 18px; }
.taskcard__list li { display: flex; align-items: center; gap: 16px; font: 800 clamp(1.2rem, 4.5vw, 1.55rem)/1.1 var(--display); color: #fff; }
.taskcard__go { display: flex; width: max-content; margin: 0 auto; align-items: center; gap: .5em; padding: .6em 1.4em; background: var(--zolty); color: var(--ink); border-radius: 999px; font: 800 1rem var(--display); text-transform: uppercase; box-shadow: 0 4px 0 var(--ink); }
.task-ico { flex: none; width: 50px; height: 50px; display: grid; place-items: center; border-radius: 50%; border: 3px solid var(--ink); background: #fff; color: var(--ink); box-shadow: 0 3px 0 var(--ink); }
.task-ico .ico { width: 28px; height: 28px; }
.task-ico--car { background: #3D8BFF; color: #fff; }
.task-ico--battery { background: #2BDB6B; }
.task-ico--jump { background: var(--amber); }
.task-ico--star { background: var(--zolty); }
.task-ico--lane { background: #C9C3DD; }
.task-ico--wheelie { background: var(--cyan); }
.task-ico--cat { background: #FFA552; }
.task-ico--ban { background: var(--pink); color: #fff; }
.task-ico--camera { background: var(--green-light); }

/* Ścieżka poziomów jak na mapie w grze */
.path { list-style: none; margin: 0; padding: 0 0 0 0; position: relative; display: grid; gap: 44px; }
.path::before { content: ""; position: absolute; top: 0; bottom: 30px; left: 40px; width: 22px; margin-left: -11px; border-radius: 11px; background: repeating-linear-gradient(180deg, var(--zolty) 0 16px, transparent 16px 34px) center / 4px 100% no-repeat #2B2150; box-shadow: 0 0 0 4px var(--ink); }
.path__stop, .path__soon { position: relative; display: grid; grid-template-columns: 80px 1fr; gap: 6px 18px; align-items: start; }
.node { position: relative; z-index: 1; width: 80px; height: 80px; display: grid; place-content: center; text-align: center; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #FFE45C, var(--zolty) 60%); border: 4px solid var(--ink); box-shadow: 0 7px 0 var(--zolty-dark), 0 7px 0 4px var(--ink); color: var(--ink); font: italic 900 1.15rem/1 var(--display); }
.node small { display: block; font: 800 .55rem/1.2 var(--display); text-transform: uppercase; letter-spacing: .06em; font-style: normal; }
.node--off { background: radial-gradient(circle at 50% 35%, #8C86A3, var(--off) 60%); box-shadow: 0 7px 0 #4A4560, 0 7px 0 4px var(--ink); color: #E7E3F2; font-size: 1.6rem; }
.polaroid { grid-column: 2; margin: 0; width: min(100%, 260px); background: #fff; padding: 10px 10px 0; border-radius: 6px; box-shadow: 0 8px 0 rgba(11,8,22,.5), 0 18px 40px rgba(8,4,20,.4); rotate: -3deg; }
.path__stop--r .polaroid { rotate: 3deg; }
.polaroid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 62%; border-radius: 3px; }
.polaroid figcaption { padding: 8px 0 12px; text-align: center; font: italic 900 1.3rem/1 var(--display); text-transform: uppercase; color: var(--ink); }
.path__text { grid-column: 2; margin: 10px 0 0; color: var(--muted); }
.path__text strong { color: #fff; }
.signs { display: flex; flex-wrap: wrap; gap: 14px; padding-top: 12px; }
.roadsign { text-transform: uppercase; display: inline-flex; flex-direction: column; padding: .55em 2.2em .55em 1em; background: #1E5BC6; color: #fff; border: 3px solid #fff; outline: 3px solid var(--ink); border-radius: 4px; font: 800 1.15rem/1 var(--display); letter-spacing: .04em; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%); }
.roadsign small { font-size: .62em; letter-spacing: .12em; text-transform: uppercase; color: var(--zolty); margin-top: 4px; }
@media (min-width: 900px) {
  .path::before { left: 50%; }
  .path__stop { grid-template-columns: 1fr 96px 1fr; gap: 0 36px; align-items: center; }
  .path__stop .node { grid-column: 2; grid-row: 1; justify-self: center; }
  .path__stop--l .polaroid { grid-column: 1; grid-row: 1; justify-self: end; }
  .path__stop--l .path__text { grid-column: 3; grid-row: 1; }
  .path__stop--r .polaroid { grid-column: 3; grid-row: 1; justify-self: start; }
  .path__stop--r .path__text { grid-column: 1; grid-row: 1; text-align: right; }
  .path__text { margin: 0; font-size: 1.1rem; max-width: 340px; justify-self: start; }
  .path__stop--r .path__text { justify-self: end; }
  .path__soon { grid-template-columns: 1fr 96px 1fr; gap: 0 36px; align-items: center; }
  .path__soon .node { grid-column: 2; justify-self: center; }
  .path__soon .signs { grid-column: 3; }
}

/* Garaż */
.duo { min-height: 520px; }
.duo .phone { position: absolute; width: min(240px, 52vw); }
.phone--back { rotate: -8deg; translate: -30% 4%; opacity: .95; }
.phone--front { rotate: 5deg; translate: 30% 0; }
.chips { list-style: none; padding: 0; margin: 18px 0 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { padding: .35em .8em; border-radius: 999px; background: var(--ink-2); border: 2px solid var(--ink-3); font: 700 .9rem var(--display); color: #fff; }
.chips .chips__more { background: var(--zolty); color: var(--ink); border-color: var(--ink); }

/* Postacie */
.cast { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
.cast__card { text-align: center; display: grid; justify-items: center; align-content: start; background: linear-gradient(180deg, rgba(255,255,255,.04), transparent); border-radius: 28px; padding: 22px 18px; }
.cast__card img { width: min(220px, 60vw); filter: drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(0 10px 0 rgba(11,8,22,.5)); }
.cast__card h3 { font: italic 900 1.6rem var(--display); text-transform: uppercase; color: var(--zolty); text-shadow: var(--outline); margin: 14px 0 8px; }
.cast__card p { color: var(--muted); max-width: 30em; }
.cast__more { text-align: center; max-width: 720px; margin: 30px auto 0; font-size: 1.1rem; }
@media (min-width: 900px) { .cast { grid-template-columns: repeat(3, 1fr); } .cast__card:last-child { padding-top: 96px; } }
/* Na telefonie postacie i wyzwania przewija się w bok, żeby strona nie była za długa. */
@media (max-width: 699px) {
  .cast, .challenges { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 18px; scrollbar-width: none; }
  .cast > li, .challenges > li { scroll-snap-align: center; }
}

/* #gangbrokula */
.social { background: radial-gradient(ellipse 70% 50% at 20% 0%, rgba(255, 45, 120, .35), transparent 70%), radial-gradient(ellipse 60% 50% at 90% 100%, rgba(41, 231, 255, .22), transparent 70%), #1C0F3E; overflow: hidden; }
.hashtag { font: italic 900 clamp(2.6rem, 12vw, 7rem)/.95 var(--display); letter-spacing: -.03em; margin: 0 0 .15em; background: linear-gradient(90deg, var(--lime), var(--cyan) 55%, var(--pink)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 6px 0 var(--ink)); overflow-wrap: anywhere; }
.hashtag--big { font-size: clamp(2.4rem, 11vw, 6rem); }
.steps { list-style: none; margin: 0 0 40px; padding: 0; display: grid; gap: 18px; counter-reset: step; }
.steps li { display: flex; gap: 16px; align-items: center; }
.steps .node { width: 58px; height: 58px; font-size: 1.6rem; flex: none; }
.steps p { margin: 0; }
.steps strong { color: #fff; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); } .steps--five { grid-template-columns: repeat(5, 1fr); } .steps--five li { flex-direction: column; text-align: center; } }
.challenges { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.challenge { background: var(--ink-2); border: 4px solid var(--ink); border-radius: 22px; padding: 20px; box-shadow: 0 6px 0 var(--ink); }
.challenge h3 { font: italic 900 1.3rem var(--display); text-transform: uppercase; color: var(--zolty); margin: 14px 0 8px; }
.challenge p { margin: 0; color: var(--muted); }
.social__row { display: flex; flex-wrap: wrap; gap: 14px; margin: 36px 0 18px; }
.safety { display: flex; gap: .6em; align-items: flex-start; color: var(--muted); font-size: .95rem; max-width: 760px; }
.safety .ico { color: var(--green-light); margin-top: .2em; }

/* Klipy graczy: karta w stylu gry, a odtwarzacz dopiero po kliknięciu */
.clips { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.clip__frame { position: relative; aspect-ratio: 9 / 16; border-radius: 24px; border: 4px solid var(--ink); box-shadow: 0 6px 0 var(--ink); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 18px; background: radial-gradient(circle at 30% 20%, rgba(41,231,255,.35), transparent 50%), radial-gradient(circle at 80% 70%, rgba(255,45,120,.4), transparent 55%), var(--ink-2); }
.clip--instagram .clip__frame { background: radial-gradient(circle at 25% 15%, rgba(255,182,39,.45), transparent 50%), radial-gradient(circle at 80% 80%, rgba(255,45,120,.5), transparent 55%), var(--ink-2); }
.clip--youtube .clip__frame { background: radial-gradient(circle at 70% 20%, rgba(255,60,60,.4), transparent 50%), radial-gradient(circle at 20% 80%, rgba(255,214,10,.3), transparent 55%), var(--ink-2); }
.clip__platform { position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: .4em; padding: .3em .7em; border-radius: 999px; background: var(--ink); font: 800 .85rem var(--display); }
.clip__broc { position: absolute; top: 22%; left: 50%; width: 86px; translate: -50% 0; }
.clip__author { margin: 0; font: italic 900 1.35rem/1.1 var(--display); color: #fff; text-shadow: var(--outline); overflow-wrap: anywhere; }
.clip__caption { margin: 0; font-size: .92rem; color: #E5DEFF; }
.clip__note { margin: 0; font-size: .75rem; color: var(--muted); }
.clip__frame.is-playing { padding: 0; background: #000; }
.clip__frame iframe { width: 100%; height: 100%; border: 0; }
.clip__link { display: inline-block; margin-top: 10px; font-weight: 700; font-size: .92rem; }
.empty { display: flex; gap: 22px; align-items: center; background: var(--ink-2); border: 4px dashed var(--ink-3); border-radius: 26px; padding: 22px; max-width: 760px; }
.empty img { width: 120px; }
.empty__title { font: italic 900 1.5rem var(--display); text-transform: uppercase; color: var(--zolty); margin-bottom: .3em; }
@media (max-width: 520px) { .empty { flex-direction: column; text-align: center; } }

/* Zrzuty i zwiastun */
.shots { list-style: none; margin: 0 calc(-1 * var(--gutter)); padding: 8px var(--gutter) 22px; display: grid; grid-auto-flow: column; grid-auto-columns: min(62vw, 250px); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.shots li { scroll-snap-align: start; }
.shots img { border-radius: 18px; border: 4px solid var(--ink); box-shadow: 0 6px 0 var(--ink); }
.shots p { margin: 10px 0 0; font: 800 .95rem var(--display); text-align: center; }
.shots--small { grid-auto-columns: 150px; margin-top: 24px; }
.trailer { display: grid; gap: 30px; align-items: center; margin-top: 40px; }
.trailer .phone { width: min(260px, 64vw); justify-self: center; }
@media (min-width: 800px) { .trailer { grid-template-columns: auto 1fr; } }

/* Pytania */
.faq { display: grid; gap: 12px; }
.faq details { background: var(--ink-2); border: 4px solid var(--ink); border-radius: 18px; box-shadow: 0 5px 0 var(--ink); }
.faq details[open] { border-color: var(--zolty); }
.faq summary { list-style: none; cursor: pointer; padding: 16px 52px 16px 18px; position: relative; font: 800 1.08rem/1.3 var(--display); color: #fff; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 16px; top: 50%; translate: 0 -50%; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--zolty); color: var(--ink); font: 900 1.3rem/1 var(--display); transition: rotate .2s; }
.faq details[open] summary::after { rotate: 45deg; }
.faq details p { padding: 0 18px 18px; margin: 0; color: #E5DEFF; }

/* Pas pobierania */
.download { position: relative; overflow: hidden; isolation: isolate; padding: 70px 0 80px; }
.download__sky { position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 50% 120%, #FF8A5C 0%, #C2307A 30%, transparent 62%), linear-gradient(180deg, #24104F, #4C1678); }
.download__in { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); display: grid; gap: 26px; justify-items: center; text-align: center; }
.download__hero { width: min(260px, 58vw); filter: drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(0 12px 0 rgba(11,8,22,.5)); animation: float 5s ease-in-out infinite; }
.download__text p { color: #fff; max-width: 36em; }
.download .stores { justify-content: center; margin: 20px 0; }
.download__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; font-size: .95rem; }
@media (min-width: 900px) {
  .download__in { grid-template-columns: auto 1fr; text-align: left; justify-items: start; gap: 56px; }
  .download .stores, .download__meta { justify-content: flex-start; }
}

/* Nagłówek podstron */
.pagehead { position: relative; overflow: hidden; isolation: isolate; padding: 64px 0 72px; }
.pagehead .sky { z-index: -1; }
.pagehead .sky__rays { top: 120%; }
.pagehead__in { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.pagehead__in .lead { max-width: 40em; text-shadow: 0 2px 10px rgba(15,10,32,.6); }
.pagehead--short { padding: 52px 0 40px; }
.pagehead--404 { text-align: center; padding: 90px 0 110px; }
.pagehead--404 .pagehead__in { display: grid; justify-items: center; }
.toc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.toc a { padding: .4em .85em; border-radius: 999px; background: rgba(27,20,48,.75); border: 2px solid rgba(255,255,255,.25); color: #fff; text-decoration: none; font: 700 .9rem var(--display); }
.toc a:hover { background: var(--zolty); color: var(--ink); border-color: var(--ink); }

/* Rodzaje zadań i tabela hulajnóg */
.tasktypes { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.tasktypes li { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: center; background: var(--ink-2); border: 3px solid var(--ink-3); border-radius: 18px; padding: 14px; }
.tasktypes .task-ico { grid-row: span 2; }
.tasktypes h3 { font: italic 900 1.1rem var(--display); text-transform: uppercase; color: var(--zolty); }
.tasktypes p { margin: 0; font-size: .95rem; color: var(--muted); }
.table-wrap { overflow-x: auto; border-radius: 18px; border: 4px solid var(--ink); box-shadow: 0 6px 0 var(--ink); }
table { width: 100%; border-collapse: collapse; background: var(--ink-2); font-size: .98rem; }
th, td { padding: 10px 14px; text-align: left; border-bottom: 2px solid var(--ink-3); white-space: nowrap; }
thead th { background: var(--ink); color: var(--zolty); font: 800 .85rem var(--display); text-transform: uppercase; letter-spacing: .05em; }
tbody th { font: 800 1rem var(--display); color: #fff; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
.dots { display: inline-flex; gap: 4px; }
.dots i { width: 12px; height: 12px; border-radius: 50%; background: var(--ink-3); border: 2px solid var(--ink); }
.dots i.on { background: var(--green-light); }

/* Treści z Markdown */
.prose h2 { font: italic 900 clamp(1.35rem, 4vw, 1.7rem)/1.15 var(--display); text-transform: uppercase; color: var(--zolty); text-shadow: var(--outline); margin: 1.8em 0 .6em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font: 800 1.15rem/1.3 var(--display); margin: 1.4em 0 .5em; color: #fff; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1em; }
.prose li { margin-bottom: .45em; }
.prose .table-wrap { margin: 0 0 1.4em; }
.prose td, .prose th { white-space: normal; }
.prose--cards h2 { display: flex; align-items: center; gap: .5em; }
.prose--cards h2::before { content: ""; flex: none; width: 34px; height: 34px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg stroke='%231B1430' stroke-width='3' stroke-linejoin='round'%3E%3Cpath d='M26 34h12l-2 22a4 4 0 0 1-8 0z' fill='%238BE36B'/%3E%3Ccircle cx='20' cy='28' r='11' fill='%234DB33D'/%3E%3Ccircle cx='44' cy='28' r='11' fill='%234DB33D'/%3E%3Ccircle cx='32' cy='18' r='13' fill='%234DB33D'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; }
.doc-wrap { display: grid; gap: 28px; }
@media (min-width: 1000px) { .doc-wrap { grid-template-columns: 240px minmax(0, 820px); align-items: start; } }
.doc-toc { display: none; }
@media (min-width: 1000px) {
  .doc-toc { display: grid; gap: 4px; position: sticky; top: 90px; }
  .doc-toc p { font: 800 .8rem var(--display); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 6px; }
  .doc-toc a { color: #fff; text-decoration: none; font-size: .92rem; padding: 4px 0; }
  .doc-toc a:hover { color: var(--zolty); }
}
.paper { background: var(--ink-2); border: 4px solid var(--ink); border-radius: 26px; padding: clamp(22px, 5vw, 44px); box-shadow: 0 8px 0 var(--ink); }
.paper .note { background: var(--ink); border-radius: 12px; padding: 12px 16px; color: #fff; }
/* Dokumenty prawne na kartce z Zeszytu Mamy: w kratkę, z czerwonym marginesem. */
.notebook { position: relative; background-color: var(--paper); background-image: linear-gradient(#D6E4F6 1px, transparent 1px), linear-gradient(90deg, #D6E4F6 1px, transparent 1px); background-size: 24px 24px; color: var(--ink); border: 4px solid var(--ink); border-radius: 10px 26px 26px 10px; padding: clamp(22px, 5vw, 46px) clamp(18px, 5vw, 46px) clamp(22px, 5vw, 46px) clamp(36px, 8vw, 74px); box-shadow: 0 8px 0 var(--ink); font-size: 1rem; }
.notebook::before { content: ""; position: absolute; top: 0; bottom: 0; left: clamp(22px, 5.5vw, 52px); width: 2px; background: #F06A7A; }
.notebook h2 { color: var(--ink); text-shadow: none; font-size: clamp(1.2rem, 3.6vw, 1.45rem); }
.notebook h3 { color: var(--ink); }
.notebook a { color: #B0124F; }
.notebook .table-wrap { border-width: 2px; box-shadow: none; border-radius: 8px; }
.notebook table { background: #fff; }
.notebook th, .notebook td { border-bottom: 1px solid #D6E4F6; color: var(--ink); }
.notebook thead th { background: #EEF3FB; color: var(--ink); }
.notebook tbody th { color: var(--ink); }
.notebook .note { background: var(--zolty); color: var(--ink); border-radius: 8px; padding: 10px 14px; font-weight: 700; }
.notebook code { background: #EEF3FB; padding: 0 .3em; border-radius: 4px; }

/* Prasa */
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0 0 30px; }
.facts dt { font: 800 .9rem var(--display); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; padding-top: .15em; }
.facts dd { margin: 0; color: #fff; }
@media (max-width: 520px) { .facts { grid-template-columns: 1fr; gap: 2px; } .facts dd { margin-bottom: 10px; } }
.keyart { border-radius: 22px; border: 4px solid var(--ink); box-shadow: 0 8px 0 var(--ink); }
.files { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.files a { display: flex; gap: 14px; align-items: center; padding: 14px 16px; background: var(--ink-2); border: 3px solid var(--ink-3); border-radius: 16px; color: #fff; text-decoration: none; }
.files a:hover { border-color: var(--zolty); }
.files .ico { width: 30px; height: 30px; color: var(--zolty); }
.files strong { display: block; font: 800 1rem var(--display); }
.files small { color: var(--muted); }

/* Stopka */
.footer { position: relative; background: var(--deep); padding: 150px 0 30px; margin-top: 0; }
.skyline--footer { top: 0; bottom: auto; height: 130px; background-size: auto 130px; opacity: .9; }
.skyline--footer::after { inset: auto 0 0; height: 60px; background: linear-gradient(transparent, var(--deep)); }
.footer__in { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); display: grid; gap: 36px; }
.footer__logo { width: 200px; margin-bottom: 14px; }
.footer__brand p { color: var(--muted); max-width: 30em; font-size: .95rem; }
.footer__social { display: flex; gap: 10px; }
.footer__social a { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; background: var(--ink-2); border: 3px solid var(--ink-3); color: #fff; }
.footer__social a:hover { background: var(--zolty); color: var(--ink); }
.footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 26px; }
.footer__cols h2 { font: 800 .8rem var(--display); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-bottom: 10px; }
.footer__cols a { display: block; padding: 5px 0; color: #fff; text-decoration: none; font-weight: 600; }
.footer__cols a:hover { color: var(--zolty); }
.footer__legal { max-width: var(--wrap); margin: 36px auto 0; padding: 18px var(--gutter) 0; border-top: 2px solid var(--ink-3); color: var(--muted); font-size: .85rem; }
@media (min-width: 900px) { .footer__in { grid-template-columns: 1.1fr 1.4fr; } }

.toast { position: fixed; left: 50%; bottom: 24px; z-index: 60; translate: -50% 0; background: var(--zolty); color: var(--ink); border: 3px solid var(--ink); border-radius: 999px; box-shadow: 0 5px 0 var(--ink); padding: .6em 1.2em; font: 800 1rem var(--display); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}