<div class="nexa-masterpiece"> <!-- Hero section: solid typographic monument --> <div class="hero"> <div class="hero-wordmark">NEXA</div> <div class="solid-accent"></div> <div class="hero-sub">SOLID · BOLD · GEOMETRIC</div> <p style="font-family: 'Nexa', sans-serif; font-weight: 400; margin-top: 2rem; max-width: 600px; color: #BCC6E0; font-size: 1.1rem;"> A singular typeface with uncompromising weight. <br> Solid structure meets modern character. </p> </div>

.quote-author font-family: 'Nexa', sans-serif; font-weight: 400; margin-top: 1.5rem; font-size: 1.2rem; color: #BCC6E0; letter-spacing: 2px;

.nexa-button:hover background: #FFD966; transform: scale(1.02); box-shadow: 0 12px 28px rgba(0,0,0,0.4);

// 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'; );

.nexa-button font-family: 'Nexa', sans-serif; font-weight: 800; background: #F5C542; color: #0A0C0F; border: none; padding: 1rem 2.5rem; font-size: 1.2rem; border-radius: 60px; cursor: pointer; transition: all 0.25s ease; letter-spacing: 0.03em; box-shadow: 0 8px 20px rgba(0,0,0,0.3);

/* decorative solid block (geometric accent) */ .solid-accent width: 80px; height: 6px; background: #F5C542; margin: 2rem auto 1rem; border-radius: 4px;

// Array of solid, punchy statements using Nexa style const solidMessages = [ "⚡ NEXA HEAVY: A SOLID PILLAR OF TYPOGRAPHY", "⬛ SOLID PIECE — BOLD, RECTILINEAR, POWERFUL", "🔲 NEXA 800: UNBREAKABLE CHARACTER STRUCTURE", "▣ GEOMETRIC SOLIDITY. EVERY LETTER A MONOLITH.", "✦ TYPOGRAPHIC STRENGTH: NEXA DEFINES 'SOLID'", "◼️ NO FRAGILITY — JUST BOLD EXPRESSION", "🔷 SOLID PIECE ACTIVATED: NEXA'S HEAVY WEIGHT" ];