<!-- Another solid grid: show different use cases as "solid pieces" of design --> <div class="section-title">◼️ nexa | solid applications</div> <div class="cards-grid"> <div class="nexa-card"> <div class="card-icon">🏗️</div> <div class="card-title">Brand identity</div> <div class="card-text">Solid logotypes and visual systems. Nexa's geometric structure creates trust and modernity. A go-to font for bold brand voices.</div> </div> <div class="nexa-card"> <div class="card-icon">📰</div> <div class="card-title">Editorial design</div> <div class="card-text">Magazines, posters, and impactful headlines. Nexa's heavy weights command attention while remaining elegant and solid.</div> </div> <div class="nexa-card"> <div class="card-icon">🖥️</div> <div class="card-title">UI & Web</div> <div class="card-text">Solid digital experiences. With clear shapes and high legibility, Nexa elevates modern interfaces into memorable, solid pieces.</div> </div> </div>

<!-- Interactive moment: "solid piece" dynamic feedback --> <div class="action-area"> <button class="nexa-button" id="solidPieceBtn">⚡ SHOW SOLID PIECE ⚡</button> </div> <div id="dynamicMessage" style="text-align: center; font-family: 'Nexa', sans-serif; font-weight: 400; font-size: 1.2rem; min-height: 70px; margin-top: 0.5rem; color: #F5C542;"></div>

/* ========== INTERACTIVE / SOLID BUTTON (Nexa touch) ========== */ .action-area display: flex; justify-content: center; margin: 3rem 0 2rem;

// initial message to indicate solid piece ready window.addEventListener('load', () => msgDiv.innerHTML = `<span style="background: #1a1f2a; padding: 0.5rem 1.2rem; border-radius: 2rem; font-size: 0.9rem; opacity: 0.9;">◼️ "NEXA" — A SOLID PIECE READY — CLICK THE BUTTON ◼️</span>`; msgDiv.style.opacity = '1'; // add a subtle entrance animation to hero text const heroText = document.querySelector('.hero-wordmark'); if(heroText) heroText.style.animation = 'fadeInUp 0.8s ease-out'; );