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

html, body {
height: 100%;
width: 100%;
}

body {
font-family: Poppins, sans-serif;
overflow-x: hidden;
}

.font-fredoka {
font-family: Fredoka, sans-serif;
}

#app-wrapper {
width: 100%;
min-height: 100%;
transition: background-color 0.3s ease;
}

.book-shadow {
box-shadow: 0 20px 60px rgba(0, 150, 255, 0.2);
}

.hover-lift {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
transform: translateY(-8px);
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.15) !important;
}

/* Mobile Menu Styles */
.hamburger-btn {
width: 40px;
height: 40px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 6px;
cursor: pointer;
background: none;
border: none;
}

.hamburger-btn span {
width: 28px;
height: 3px;
background-color: #0096FF;
border-radius: 2px;
transition: all 0.3s ease;
}

.hamburger-btn.active span:nth-child(1) {
transform: rotate(45deg) translate(8px, 8px);
}

.hamburger-btn.active span:nth-child(2) {
opacity: 0;
}

.hamburger-btn.active span:nth-child(3) {
transform: rotate(-45deg) translate(7px, -7px);
}

.mobile-menu {
position: fixed;
top: 0;
left: -100%;
width: 100%;
height: 100vh;
background-color: #ffffff;
z-index: 999;
transition: left 0.3s ease;
display: flex;
flex-direction: column;
padding-top: 80px;
}

.mobile-menu.active {
left: 0;
}

.mobile-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.3);
z-index: 998;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}

.mobile-overlay.active {
opacity: 1;
pointer-events: auto;
}

/* Navigation */
nav {
background-color: #ffffff;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
position: sticky;
top: 0;
z-index: 100;
}

.nav-container {
max-width: 1440px;
margin: 0 auto;
padding: 1rem 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
}

.desktop-nav {
display: none;
gap: 2rem;
}

@media (min-width: 768px) {
.desktop-nav {
display: flex;
}
.hamburger-btn {
display: none;
}
.mobile-menu {
display: none !important;
}
}

.desktop-nav a {
font-weight: 600;
text-decoration: none;
color: #333333;
transition: color 0.3s ease;
font-size: 1rem;
}

.desktop-nav a:hover {
color: #0096FF;
}

/* CTA Buttons */
button, a.cta {
font-weight: 700;
border: none;
cursor: pointer;
font-size: 1.125rem;
transition: all 0.3s ease;
}

button:active {
transform: scale(0.98);
}

/* Character Card Animations */
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

.character-card {
animation: slideIn 0.6s ease-out;
}

/* Responsive */
@media (max-width: 767px) {
.desktop-nav {
display: none;
}

.grid.md\:grid-cols-2 {
grid-template-columns: 1fr;
}

.grid.md\:grid-cols-3 {
grid-template-columns: 1fr;
}

.grid.md\:grid-cols-4 {
grid-template-columns: repeat(2, 1fr);
}

.max-w-lg {
max-w-full;
}
}

body { box-sizing: border-box; }