Bioketel reads nothing like the incumbent boiler-manufacturer playbook. Centered hero copy, equal-width benefit-card grids, and gutter misalignment between hero and body are the specific patterns this brand is built to avoid.

The quarter-circle leaf is the one recurring motif: brand logomark, bullet, step marker, savings badge. It is the only shape that breaks container edges — always by overlapping, never by floating inside its parent.

One wrapper class controls every horizontal edge, from the header logo to the footer credits. Every section inherits the same 1280px column and gutter — nothing is allowed to define its own container.

The page reads sparse: wide zone padding, few elements per section, no micro-gaps. Where the grid varies, it does so by rule — asymmetric tracks and content-sized columns — not by accident.

The hero is a full-screen photo stage with copy anchored left inside the universal container. On mobile the copy column clamps to half the viewport, keeping the photo subject visible alongside the text.

The homepage runs through thirteen zones with a deliberate rhythm: open on a full-screen photo, move through educational splits, hit a dense product-evidence block, break at a parallax band, and close on an orange contact zone above the teal footer. No two adjacent sections share the same column structure or background color.

Zones swap between white, cream, teal, and orange as hard horizontal cuts. Only five zones step outside the 80rem container; everywhere else the color runs edge-to-edge while the content stays contained.

Sparse and dense zones alternate in a roughly even beat throughout the page. Two consecutive dense sections sit mid-scroll to carry the product evidence before the layout opens back up.

A single token (8rem / 128px) sets every section's top and bottom padding. Inner gaps step from 1.25rem to 4.2rem in fixed ratios — the parallax band is the only zone that opts out of this cadence entirely.

Three grid patterns live inside the universal 1280px container: an asymmetric three-track for the benefits matrix, a 50/50 split for the boiler showcase, and a 12-column lockup for the terminal contact section. No two consecutive sections share the same column template.

All content sits inside a single 80rem (1280px) column. The hero copy narrows to 42rem on desktop and clamps to 50vw on mobile, so the photo subject stays visible beside the text rather than behind it.

There is no card system in content sections. Benefit rows are separated by 1px hairlines, not shadow-and-radius containers. Buttons use 12px radius; photo frames use 32px — those are the only two values in the radius scale that matter.

Depth comes from three sources: 1px hairline borders between content rows, the leaf SVG as structural anchor above features, and full-bleed color bands as macro-dividers between zones. There is no elevation system.

Product and portrait cutouts stay un-radiused — they read as cutouts, not cards. Decorative shapes, the leaf above all, are expected to break container edges rather than sit obediently inside them.

Orange closes every flow. Two high-density CTA zones bookend the page, and every "white content → orange band" color flip signals a conversion moment. Ambient CTAs persist in the header and footer so the path is never more than a scroll away.

The layout stays stable as the mobile browser chrome shows and hides — the hero photo never rescales, the sticky header never jumps. Cutouts that bleed past the viewport edge are clipped on mobile but kept loose on desktop, where the overflow is part of the composition.

What the brand refuses: centered hero copy, equal-width card grids, generic dot or chevron bullets, gradient buttons, pill-shaped CTAs, carousels and sliders, transparent sticky headers, accordion footers, and any container width other than 1280px. The counter pattern is always asymmetric, built from hairlines instead of cards, anchored by the leaf glyph instead of generic icons, with cutouts that break the frame rather than sit inside it.