/* Shared resets, typography, and global motion */

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

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

body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0.28;
    background:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(circle at center, rgba(0,0,0,0.9), transparent 82%);
}

.wrap {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 28px;
}

header {
    padding: 34px 0 18px;
    margin-bottom: 24px;
    background: radial-gradient(ellipse at 50% 0%, rgba(139, 183, 255, 0.10), transparent 68%);
}

@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 { display: none; }
.spa-view.active { display: contents; }