Nullbyte Security — Dark Cybersecurity Home Page for Divi 5

Nullbyte Security opens on a split-column hero set against a near-black #0b0d0c canvas. The left column leads with a 14px monospaced version badge in JetBrains Mono with 1px letter-spacing, followed by a Space Grotesk H1 at 56px, tight -1px tracking, and textWrap: balance for short-line control. Body copy sits in JetBrains Mono at 18px with a 1.6em line-height, then a horizontally grouped button pair. The primary CTA uses a solid acid-green #3dff9a fill with a matching dashed 1px border and near-black #04130b type. The secondary button sits beside it as a transparent ghost with a dashed off-white border. To the right, a dark #131715 card with a 1px dashed #2a312d border holds an "Engagement sheet": a vertical stack of dashed-divider rows listing scope, standards, reporting turnaround, and retest policy. Two typefaces carry the entire page. Space Grotesk handles all headings and the large stat numerics. JetBrains Mono handles everything else, from body paragraphs to uppercase section labels to button text.

The second section introduces the track record with an asymmetric two-column header (flex-type 16/24 and 8/24 splits for a deliberate lean-left weight) before a CSS grid of four stat cells. Each cell holds a Space Grotesk numeral at 64px weight 300 with -2px tracking, over a 13px uppercase JetBrains Mono label. The grid runs four columns on desktop and collapses to two on tablet and phone. Cell gaps are filled by a 1px #2a312d line, forming a graph-paper grid against the page background. Setting the large numerics at weight 300 rather than bold creates an editorial restraint that reads as confident rather than loud.

The services section presents five cards with intentionally differentiated backgrounds: a dark bordered card with a full 16:9 image for penetration testing, an acid-green inverted card with a Font Awesome icon for cloud review, a near-white #e8ece9 card for compliance testing, and two dark cards for red team and incident response. The variation signals service tier without resorting to color-coded tags on every card. A four-step process section follows, centered at maxWidth 720px, with numbered steps in a four-column CSS grid. Each step has a 48px circular #3dff9a badge connected to a dashed #2a312d horizontal line on desktop. The testimonials section runs three quote cards across two rows, each with a 56px square avatar at 1:1 cover fit, a 19px quote in JetBrains Mono, and an attributed name and title. The final section overlays a dark background image with a left-anchored #131715 card at maxWidth 520px, a dashed internal divider, and the repeating primary CTA.

Spacing is consistent and fully explicit throughout. Every section carries 88px of vertical padding on desktop, 64px on tablet, and 40px on phone, set directly in the module decoration rather than inherited from global styles. Two-column rows use flexWrap: wrap and flexDirection: column at the phone breakpoint, and all columns expand to full-width 24/24 flex-type on phone. The process grid steps from 4 to 2 to 1 column across breakpoints. Every heading size steps down explicitly (H1: 56px, 42px, 34px; section H2: 44px, 36px, 30px), so the layout renders correctly regardless of your Divi global typography settings.