/* ── SHARED RESETS, TYPOGRAPHY, GLOBAL STYLES ── */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: var(--bg-void);
    color: var(--text-primary);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.45;
    min-height: 100vh;
    padding-bottom: 70px;
}

/* smooth scroll & backdrop */
.wrap {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 28px;
}

/* header with translucency */
header {
    padding: 28px 0 20px;
    margin-bottom: 28px;
    background: radial-gradient(ellipse at 80% 0%, rgba(61, 214, 140, 0.08), transparent 70%);
}

@keyframes slideIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(30px) translateY(-50%); } to { opacity: 1; transform: translateX(0) translateY(-50%); } }
@keyframes pulse { 0% { opacity: 0.5; } 50% { opacity: 1; } 100% { opacity: 0.5; } }
@keyframes breathe {
    0% { opacity: 0.4; transform: scale(0.8);}
    100% { opacity: 1; transform: scale(1.2);}
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes nfab-pulse { 0%,100%{opacity:1} 50%{opacity:0.25} }

/* ── SPA view routing ── */
.spa-view          { display: none; }
.spa-view.active   { display: contents; }