Studio Sajtova

Lifted off the page, the screen shows what it sits on: the browser window, a content column inside a 1,280 px container with 16 px padding, and a hero split 1.1 : 0.9 between the pitch and a form, 40 px apart, under an 85 px header.

The page's semantic roles become physical layers: the headline (the page's h1) and the form nearest, then the two actions, the supporting paragraph, the eyebrow and chips, and the navigation furthest back. The depth is an explanation of the page's hierarchy, not something the markup ranks.

Put back, every element lands on its measured position. The text column shares one left edge at the container's padding, the form card ends at the container's right edge, and the two columns are centred on the same axis.

The live system goes on in layers: a navy page with a faint 56 px grid; Space Grotesk for the headline and Inter for body text; the cyan gradient kept for the key words and the actions; glass cards, fields and chips with thin white borders; and the shapes: 22 px cards, 18 px fields and buttons, pill-shaped chips.

Reassembled, it's the live first screen of studiosajtova.com: TanStack Start and React on Vite, styled with Tailwind CSS and served through Cloudflare. The hero form sends through Web3Forms.

Below 1024 px the same page changes structure rather than shrinking. The navigation and the call button move into a menu button, the hero becomes one column with the form beneath the text, the headline rewraps from three lines to two, and a fixed bar keeps the analysis action on screen.

At phone width the headline rewraps to three lines and the paragraph to five, the two actions stack, the flow chips are hidden and the form's fields go to one column. The form now starts near the bottom of the screen, and the fixed bar keeps the analysis action within reach.