/* Hero illustration */
.hero-illustration {
    position: relative;
    width: 100%;
    max-width: 460px;
    aspect-ratio: 1 / 0.85;
}
.hero-illustration .desk {
    position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
    width: 85%; height: 38%;
    background: #FFD86A;
    border-radius: 20px 20px 12px 12px;
    border: 3px solid #F08A52;
}
.hero-illustration .desk-top {
    position: absolute; bottom: 36%; left: 50%; transform: translateX(-50%);
    width: 90%; height: 6%;
    background: #F08A52;
    border-radius: 8px;
}
.hero-illustration .book-stack {
    position: absolute; bottom: 42%; left: 18%;
    width: 22%; height: 22%;
}
.hero-illustration .book1 {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 35%;
    background: #4A95C7; border-radius: 4px 8px 8px 4px; border: 2px solid #2F5A7B;
}
.hero-illustration .book2 {
    position: absolute; bottom: 32%; left: 5%; width: 90%; height: 35%;
    background: #FFB680; border-radius: 4px 8px 8px 4px; border: 2px solid #F08A52;
}
.hero-illustration .book3 {
    position: absolute; bottom: 62%; left: 10%; width: 80%; height: 35%;
    background: #BBE0F3; border-radius: 4px 8px 8px 4px; border: 2px solid #4A95C7;
}
.hero-illustration .lamp {
    position: absolute; bottom: 42%; right: 15%;
    width: 18%; height: 45%;
}
.hero-illustration .lamp-base {
    position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
    width: 50%; height: 8%; background: #2F5A7B; border-radius: 6px;
}
.hero-illustration .lamp-pole {
    position: absolute; bottom: 8%; left: 50%; transform: translateX(-50%);
    width: 8%; height: 55%; background: #2F5A7B; border-radius: 3px;
}
.hero-illustration .lamp-shade {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 100%; height: 38%; background: #FFD86A; border: 2px solid #F08A52;
    border-radius: 50% 50% 6px 6px;
}
.hero-illustration .lamp-glow {
    position: absolute; top: 28%; left: 50%; transform: translateX(-50%);
    width: 140%; height: 60%; background: radial-gradient(ellipse, rgba(255,239,179,0.5) 0%, transparent 70%);
}
.hero-illustration .backpack {
    position: absolute; bottom: 5%; left: 5%;
    width: 18%; height: 35%;
}
.hero-illustration .bp-body {
    position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
    width: 85%; height: 80%; background: #F08A52; border: 2px solid #2F5A7B;
    border-radius: 8px 8px 14px 14px;
}
.hero-illustration .bp-top {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 60%; height: 28%; background: #F08A52; border: 2px solid #2F5A7B;
    border-radius: 12px 12px 0 0;
}
.hero-illustration .bp-pocket {
    position: absolute; bottom: 12%; left: 50%; transform: translateX(-50%);
    width: 55%; height: 30%; background: #FFB680; border: 1.5px solid #2F5A7B;
    border-radius: 6px;
}
.hero-illustration .pencil-cup {
    position: absolute; bottom: 42%; left: 52%;
    width: 12%; height: 20%;
}
.hero-illustration .cup {
    position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
    width: 90%; height: 75%; background: #BBE0F3; border: 2px solid #4A95C7;
    border-radius: 4px 4px 8px 8px;
}
.hero-illustration .pencil1 {
    position: absolute; bottom: 50%; left: 25%;
    width: 6px; height: 50%; background: #FFD86A; border-radius: 2px 2px 0 0;
    transform: rotate(-8deg);
}
.hero-illustration .pencil2 {
    position: absolute; bottom: 50%; left: 55%;
    width: 6px; height: 42%; background: #F08A52; border-radius: 2px 2px 0 0;
    transform: rotate(6deg);
}
.hero-illustration .star1 {
    position: absolute; top: 8%; right: 8%; width: 28px; height: 28px; color: #FFD86A;
    animation: twinkle 3s ease-in-out infinite;
}
.hero-illustration .star2 {
    position: absolute; top: 18%; left: 8%; width: 20px; height: 20px; color: #FFB680;
    animation: twinkle 3s ease-in-out 1s infinite;
}
.hero-illustration .star3 {
    position: absolute; top: 4%; left: 42%; width: 16px; height: 16px; color: #FFD86A;
    animation: twinkle 3s ease-in-out 2s infinite;
}

@keyframes twinkle {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.85); }
}