:root { 
    --ink: #241C15; 
    --paper: #FDFBF7; 
    --mcm-coral: #E76F51; 
    --slate: #4A5D6B; 
    --wobble: 255px 15px 225px 15px/15px 225px 15px 255px; 
}
body { 
    font-family: 'Fredoka', sans-serif; 
    background: var(--slate); 
    color: var(--ink); 
    text-align: center; 
    margin: 0; 
    display: flex; 
    justify-content: center; 
}
.container { width: 95%; max-width: 450px; padding: 20px 10px; }
.card { background: white; border: 3px solid var(--ink); border-radius: var(--wobble); padding: 30px; box-shadow: 8px 8px 0px rgba(0,0,0,0.1); }
.logo { width: 100%; height: auto; border-radius: 15px; border: 2px solid var(--ink); margin-bottom: 20px; }
.name { font-family: 'DM Serif Display', serif; font-size: 2.2rem; margin-bottom: 5px; }
.tagline { font-style: italic; opacity: 0.8; margin-bottom: 25px; line-height: 1.4; }
.primary-btn { display: block; width: 100%; background: var(--mcm-coral); color: white; padding: 18px; border: 3px solid var(--ink); border-radius: var(--wobble); font-weight: bold; font-size: 1.1rem; box-shadow: 5px 5px 0px var(--ink); cursor: pointer; margin-bottom: 20px; text-decoration: none; }
.btn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.btn { padding: 12px; border: 2px solid var(--ink); border-radius: 12px; font-weight: bold; background: #eee; text-decoration: none; color: var(--ink); }
.stats { margin-top: 25px; font-size: 0.8rem; opacity: 0.6; }