.spectrum-title font-family: 'Nexa', sans-serif; font-weight: 800; font-size: 1.8rem; margin-bottom: 1.8rem; text-align: center; color: #E8EDFF;

/* main canvas — every piece is built around Nexa's strong structure */ .nexa-masterpiece max-width: 1400px; margin: 0 auto; padding: 2rem 2rem 4rem 2rem;

<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>

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

.cards-grid display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-bottom: 3rem;

/* Solid, massive wordmark */ .hero-wordmark font-family: 'Nexa', sans-serif; font-weight: 800; /* Heavy weight — solid piece foundation */ font-size: clamp(3.5rem, 12vw, 10rem); letter-spacing: -0.02em; background: linear-gradient(135deg, #FFFFFF 0%, #E0E4F0 80%); background-clip: text; -webkit-background-clip: text; color: transparent; text-shadow: 0 10px 30px rgba(0,0,0,0.2); margin-bottom: 0.5rem; line-height: 1.1; text-transform: uppercase;

<script> // Interactive script to emphasize "solid piece" concept with Nexa const btn = document.getElementById('solidPieceBtn'); const msgDiv = document.getElementById('dynamicMessage');