:root {
  --ink: #f4f1fa;
  --muted: #aaa3bd;
  --paper: #13101c;
  --line: #2d2740;
  --focus: #6a3fea;
  --violet: #6a3fea;
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1180px;
  font-family: "Outfit", system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-size: 1.0625rem; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
a:focus-visible { outline: 3px solid #9d80ff; outline-offset: 3px; border-radius: 6px; }

.top {
  display: flex; justify-content: space-between; align-items: center;
  max-width: var(--max); margin: 0 auto; padding: 20px var(--gutter);
}
.mark { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 1.25rem; text-decoration: none; letter-spacing: -0.01em; }
.mark img { width: 28px; height: 28px; }
.lang { font-size: 0.95rem; color: var(--muted); text-decoration: none; padding: 6px 12px; border: 1.5px solid var(--line); border-radius: 999px; }
.lang:hover { color: #fff; border-color: #9d80ff; }

/* Hero: the studio name is the image; the three apps sit under it like tiles on a shelf. */
.hero { max-width: var(--max); margin: 0 auto; padding: clamp(32px, 8vw, 96px) var(--gutter) clamp(48px, 8vw, 104px); }
.word {
  margin: 0; display: flex; align-items: center; gap: 0.12em;
  font-size: clamp(3.6rem, 15vw, 11rem); line-height: 1; font-weight: 600; letter-spacing: -0.03em;
}
.word .braces { width: 0.95em; height: 0.95em; flex: none; }
.lead { margin: 18px 0 0; font-size: clamp(1.6rem, 3.4vw, 2.6rem); line-height: 1.1; font-weight: 500; color: var(--muted); letter-spacing: -0.01em; }
.shelf { display: flex; gap: clamp(16px, 4vw, 40px); margin-top: clamp(40px, 6vw, 64px); flex-wrap: wrap; }
.shelf-item { display: flex; flex-direction: column; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; }
.shelf-item img { width: clamp(88px, 14vw, 128px); border-radius: 28%; box-shadow: 0 18px 36px -16px rgba(0, 0, 0, .8); transition: transform 160ms ease; }
.shelf-item:hover img { transform: translateY(-4px) rotate(-2deg); }
@media (prefers-reduced-motion: no-preference) {
  .shelf-item img { animation: land 640ms cubic-bezier(.2, 1.4, .4, 1) both; animation-delay: calc(140ms + var(--i) * 110ms); }
  @keyframes land { from { opacity: 0; transform: translateY(36px) rotate(-8deg) scale(.86); } }
}

/* One section per app, in that app's own colours. */
.app { padding: clamp(56px, 9vw, 120px) var(--gutter); }
.app-inner { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.app-text { max-width: 46ch; }
.app-icon { width: 72px; border-radius: 28%; margin-bottom: 20px; }
.app h2 { margin: 0; font-size: clamp(2.6rem, 6vw, 4.2rem); line-height: 1; font-weight: 700; letter-spacing: -0.03em; }
.tagline { margin: 12px 0 0; font-size: clamp(1.2rem, 2vw, 1.45rem); font-weight: 600; line-height: 1.3; }
.body { margin: 18px 0 0; }
.facts { margin: 22px 0 0; padding: 0; list-style: none; }
.facts li { padding: 9px 0 9px 26px; position: relative; border-top: 1px solid var(--rule); }
.facts li:last-child { border-bottom: 1px solid var(--rule); }
.facts li::before { content: ""; position: absolute; left: 4px; top: 1.05em; width: 10px; height: 10px; border-radius: 3px; background: var(--dot); transform: rotate(45deg); }
.status { margin: 24px 0 0; font-weight: 600; display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--pill); color: var(--pill-ink); }
.out { display: block; margin-top: 16px; font-weight: 600; text-underline-offset: 4px; }
.out.store { display: table; padding: 10px 18px; border: 2px solid var(--pill); border-radius: 12px; text-decoration: none; }
.out.store:hover { background: var(--pill); color: var(--pill-ink); }

.app-swooshi { --rule: rgba(255, 255, 255, .14); --dot: #ffc83d; --pill: #ffc83d; --pill-ink: #22164d; background: #1f1546; color: #f7f3ff; }
.app-swooshi .body, .app-swooshi .facts { color: #d9d0f5; }
.app-mifi { --rule: rgba(255, 255, 255, .14); --dot: #ff6fa5; --pill: #ff6fa5; --pill-ink: #2a0f22; background: #2a1335; color: #fdf2fb; }
.app-mifi .body, .app-mifi .facts { color: #e7cfe2; }
.app-mifi .facts li:nth-child(2)::before { background: #59c98a; }
.app-mifi .facts li:nth-child(3)::before { background: #57a8f5; }
.app-mifi .facts li:nth-child(4)::before { background: #ffc83d; }
.app-mifi .app-inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.app-mifi .app-visual { order: -1; }
.app-legnica { --rule: rgba(255, 255, 255, .12); --dot: #fecd20; --pill: #0069b4; --pill-ink: #fff; background: #1c1610; color: #f3eadf; }
.app-legnica .body, .app-legnica .facts { color: #cdbba4; }

/* Swooshi: three phones fanned out. */
.phones { display: flex; justify-content: center; align-items: flex-end; position: relative; }
.phones img { width: 34%; border-radius: 22px; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .6); border: 3px solid rgba(255, 255, 255, .12); }
.phones img:nth-child(1):not(.mifi-logo) { transform: rotate(-6deg) translateX(14%); margin-bottom: 4%; }
.phones img:nth-child(2) { position: relative; z-index: 1; width: 37%; }
.phones img:nth-child(3):not(.mifi-logo) { transform: rotate(6deg) translateX(-14%); margin-bottom: 4%; }

/* Mifi: the character above its first land. */
.app-mifi .phones img:not(.mifi-logo) { border-radius: 18px; }
.mifi-logo { position: absolute; z-index: 2; width: 28%; left: -4%; top: -20%; border: 0 !important; box-shadow: none !important; transform: none; filter: drop-shadow(0 16px 24px rgba(0, 0, 0, .45)); }

/* Legnica: three tablet screens in a row, the middle one raised. */
.tablets { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 2vw, 20px); align-items: center; }
.tablets img { border-radius: 16px; box-shadow: 0 22px 44px -22px rgba(0, 0, 0, .8); border: 1px solid rgba(255, 255, 255, .08); }
.tablets img:nth-child(2) { transform: translateY(-8%); }

.sponsor { display: flex; align-items: center; gap: 14px; margin-top: 26px; text-decoration: none; color: #cdbba4; font-size: .95rem; }
.sponsor img { width: 140px; opacity: .9; }

.foot { max-width: var(--max); margin: 0 auto; padding: 56px var(--gutter) 48px; color: var(--muted); }
.foot-grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 32px; }
.foot-brand p { margin: 10px 0 0; }
.foot h2 { margin: 0 0 10px; font-size: 1rem; font-weight: 600; color: var(--ink); }
.foot nav a { display: block; padding: 4px 0; text-decoration: none; }
.foot nav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.foot-bottom { margin: 40px 0 0; padding-top: 20px; border-top: 1px solid var(--line); font-size: .95rem; }
@media (max-width: 720px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }

/* Privacy and support: one readable column. */
.doc { max-width: 68ch; margin: 0 auto; padding: clamp(24px, 6vw, 72px) var(--gutter) 24px; }
.doc h1 { margin: 0 0 24px; font-size: clamp(2.2rem, 5vw, 3.2rem); line-height: 1.05; font-weight: 700; letter-spacing: -0.02em; }
.doc h2 { margin: 40px 0 10px; font-size: 1.4rem; font-weight: 600; }
.doc p, .doc li { color: #d6d0e4; }
.doc ul { padding-left: 1.2em; }
.doc li { margin: 8px 0; }
.doc a { color: #b8a3ff; text-underline-offset: 3px; }
.doc-date { margin-top: 40px; color: var(--muted) !important; font-size: .95rem; }

@media (max-width: 820px) {
  .app-inner, .app-mifi .app-inner { grid-template-columns: 1fr; }
  .app-mifi .app-visual { order: 0; }
  .app-visual { max-width: 560px; }
  .app-mifi .phones { margin-top: 40px; }
  .mifi-logo { top: -16%; left: -2%; width: 28%; }
}

/* Scroll-driven motion: CSS only, tied to scroll position, never to time. Browsers without
   animation-timeline (Firefox today) and people who ask for less motion get the static page. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* The hero lets go of its apps: the icons lift and shrink as the hero leaves the screen. */
    .shelf { animation: shelf-leave linear both; animation-timeline: view(); animation-range: exit 0% exit 90%; }
    @keyframes shelf-leave { to { transform: translateY(-40px) scale(.82); opacity: .25; } }
    .word { animation: word-leave linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; transform-origin: 0 100%; }
    @keyframes word-leave { to { transform: scale(.9); opacity: .4; } }

    /* Each app's icon lands next to its name as the section comes in. */
    .app-icon { animation: icon-land linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; }
    @keyframes icon-land { from { transform: translateY(-56px) rotate(-14deg) scale(1.5); opacity: 0; } }

    /* Swooshi: the three phones start stacked and fan out, like tiles sliding apart. */
    .phones img:nth-child(1):not(.mifi-logo) { animation: fan-left linear both; animation-timeline: view(); animation-range: entry 5% cover 45%; }
    .phones img:nth-child(3):not(.mifi-logo) { animation: fan-right linear both; animation-timeline: view(); animation-range: entry 5% cover 45%; }
    @keyframes fan-left { from { transform: translateX(70%) rotate(0deg) scale(.9); } }
    @keyframes fan-right { from { transform: translateX(-70%) rotate(0deg) scale(.9); } }

    /* Mifi: the character pops up over its land; the land drifts a little slower than the page. */
    .mifi-logo { animation: mifi-pop linear both; animation-timeline: view(); animation-range: entry 20% cover 50%; }
    @keyframes mifi-pop { from { transform: translateY(60%) rotate(18deg) scale(.4); opacity: 0; } 70% { transform: translateY(-6%) rotate(-4deg) scale(1.05); opacity: 1; } }

    /* Legnica: the screens rise at different speeds, the middle one first. */
    .tablets img { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }
    .tablets img:nth-child(1) { --from: 90px; }
    .tablets img:nth-child(2) { --from: 30px; animation-name: rise-mid; }
    .tablets img:nth-child(3) { --from: 140px; }
    @keyframes rise { from { transform: translateY(var(--from)); opacity: .3; } }
    @keyframes rise-mid { from { transform: translateY(calc(var(--from) - 8%)); opacity: .3; } to { transform: translateY(-8%); } }
  }

  /* Switching between Polski and English morphs the page instead of reloading it. */
  @view-transition { navigation: auto; }
  .word { view-transition-name: wordmark; }
  .shelf { view-transition-name: shelf; }
}