.hero-sub font-family: 'Nexa', sans-serif; font-weight: 400; font-size: clamp(1rem, 4vw, 1.6rem); letter-spacing: 0.3em; text-transform: uppercase; color: #BCC6E0; background: rgba(20, 25, 35, 0.6); backdrop-filter: blur(4px); padding: 0.5rem 1.5rem; border-radius: 60px; display: inline-block; margin-top: 1rem; border: 1px solid rgba(255,255,255,0.2);

/* footer: solid & clean */ .footer text-align: center; margin-top: 5rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.1); font-family: 'Nexa', sans-serif; font-weight: 400; font-size: 0.85rem; color: #6F7A8F;

.card-text font-family: 'Nexa', sans-serif; font-weight: 400; font-size: 1.05rem; line-height: 1.5; color: #C9D1E8;

<!-- solid pieces grid: each card is a "solid piece" of Nexa expression --> <div class="section-title">✦ solid pieces | nexa in action</div> <div class="cards-grid"> <div class="nexa-card"> <div class="card-icon">⬛️</div> <div class="card-title">Heavy weight</div> <div class="card-text">Nexa Heavy (800) defines solidity. Perfect for headlines that demand attention, authority, and presence. No compromise, only structure.</div> <div class="bold-demo">ARCHITECTURE OF FORM</div> </div> <div class="nexa-card"> <div class="card-icon">🔲</div> <div class="card-title">Bold presence</div> <div class="card-text">Bold (700) balances power with readability. Used in modern interfaces, branding, and editorial design. A robust piece of the Nexa ecosystem.</div> <div class="bold-demo">STRENGTH IN EVERY CURVE</div> </div> <div class="nexa-card"> <div class="card-icon">▣</div> <div class="card-title">Solid geometry</div> <div class="card-text">Geometric precision meets humanist warmth. Nexa's letterforms feel solid like cast metal — each character stands as an unshakeable piece.</div> <div class="bold-demo">ENDURING · TIMELESS</div> </div> </div>