Refactor CSS — rename design-tool classes and remove ~35% dead code

[Gui-FernandesBR]

Description

The CSS codebase has two major issues:

1. Meaningless class names from design-tool export

100+ classes use opaque names like v33_2, v37_87, v89_22. Developers must cross-reference every class against the HTML to understand what it styles.

Examples of what they should be:

Current	Proposed
.v33_2	.page-wrapper
.v37_87	.hero-heading
.v33_17	.hero-description
.v35_50	.hero-tagline
.v89_22	.top-bar
.v33_8	.btn-simulate-bg

2. Dead CSS code (~35% of main.css)

~400 lines define classes that are never referenced in index.html:

• .v75_* series (lines 337-400) — unused layout blocks
• .v81_* series (lines 401-441) — unused image frames
• .v96_* series (lines 698-902) — tiny pixel-sized rectangles (design artifacts)
• .v137_50, .v279_1723, .v180_* — unused image references

Additional issues

• .name { color: #fff; } is defined twice (lines 10-12 and 211-213)
• css/utilities.css exists with helpful utility classes but is never loaded in any HTML file
• Multiple elements repeat the same 5-line background pattern that could be a single class

Affected files

• css/main.css — rename classes, remove dead code
• css/utilities.css — either use it or remove it
• index.html — update class names to match

Acceptance Criteria

• All CSS class names are semantic/descriptive
• No unused CSS rules remain (validate with a coverage tool)
• No duplicate rule definitions
• utilities.css is either integrated or removed
• Common patterns are extracted into reusable classes