:root {
    --brand-red: #e63946;
    --brand-yellow: #ffb703;
    --brand-blue: #219ebc;
    --brand-green: #2a9d8f;
    --brand-purple: #8338ec;
    --ink-black: #23272a;
    --bg-paper: #fcf9f2;
}

html { overflow-x: hidden; width: 100%; }

body {
    font-family: 'Comic Neue', cursive;
    color: var(--ink-black);
    background-color: var(--bg-paper);
    background-image: radial-gradient(#d1ccc0 1px, transparent 1px);
    background-size: 25px 25px;
    overflow-x: hidden;
    width: 100%;
}

h1, h2, h3, h4, h5, h6, .navbar-brand { font-family: 'Chewy', cursive; letter-spacing: 1px; }

.cutout-box {
    background-color: #fff;
    border: 3px solid var(--ink-black);
    border-radius: 8px;
    box-shadow: 8px 8px 0px var(--ink-black);
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
}
.cutout-box:hover { transform: translate(-4px, -4px); box-shadow: 12px 12px 0px var(--ink-black); }

.paper-scrap {
    display: inline-block;
    padding: 5px 15px;
    border: 3px solid var(--ink-black);
    box-shadow: 4px 4px 0px var(--ink-black);
    transform: rotate(-2deg);
    margin: 5px;
    border-radius: 4px;
}
.scrap-red { background-color: var(--brand-red); color: white; transform: rotate(-3deg); }
.scrap-yellow { background-color: var(--brand-yellow); color: var(--ink-black); transform: rotate(2deg); }
.scrap-blue { background-color: var(--brand-blue); color: white; transform: rotate(-1deg); }
.scrap-green { background-color: var(--brand-green); color: white; transform: rotate(1deg); }
.scrap-purple { background-color: var(--brand-purple); color: white; transform: rotate(-2deg); }

.washi-tape {
    position: absolute; width: 100px; height: 30px;
    background-color: rgba(255, 234, 167, 0.85);
    top: -15px; left: 50%;
    transform: translateX(-50%) rotate(-4deg);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    z-index: 10;
}
.washi-tape::before, .washi-tape::after {
    content: ''; position: absolute; top: 0; width: 4px; height: 100%;
    background-image: repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(0,0,0,0.1) 2px, rgba(0,0,0,0.1) 4px);
}
.washi-tape::before { left: 0; }
.washi-tape::after { right: 0; }

.polaroid {
    background: #fff; padding: 10px 10px 45px 10px;
    border: 2px solid var(--ink-black);
    box-shadow: 6px 6px 0px var(--ink-black);
    transition: transform 0.3s; position: relative;
}
.polaroid:hover { transform: scale(1.05) rotate(0deg); z-index: 5; }
.polaroid img, .polaroid video { width: 100%; height: 220px; object-fit: cover; border: 2px solid var(--ink-black); }
.polaroid-caption {
    position: absolute; bottom: 10px; left: 0; width: 100%; text-align: center;
    font-family: 'Chewy', cursive; font-size: 1.2rem; color: var(--ink-black);
}

.sticky-note {
    background-color: #fff200; padding: 25px;
    border: 2px solid var(--ink-black);
    box-shadow: 6px 6px 0px rgba(0,0,0,0.15);
    position: relative; transform: rotate(-1deg);
}
.sticky-note:nth-child(even) { background-color: #ff9ff3; transform: rotate(2deg); }
.push-pin {
    width: 18px; height: 18px; background: var(--brand-red);
    border-radius: 50%; border: 2px solid var(--ink-black);
    position: absolute; top: 10px; left: 50%;
    transform: translateX(-50%);
    box-shadow: 2px 2px 0px var(--ink-black); z-index: 10;
}
.push-pin::after {
    content: ''; position: absolute; width: 4px; height: 4px;
    background: rgba(255,255,255,0.6); border-radius: 50%; top: 2px; left: 2px;
}

.teacher-cutout {
    width: 180px; height: 180px; border-radius: 50%;
    border: 4px dashed var(--ink-black); padding: 8px;
    background-color: #fff; margin: 0 auto 15px;
    box-shadow: 6px 6px 0px var(--ink-black);
    transform: rotate(-3deg);
}
.teacher-cutout img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 2px solid var(--ink-black); }

.step-number {
    width: 70px; height: 70px; background-color: var(--brand-blue); color: white;
    font-family: 'Chewy', cursive; font-size: 2.5rem;
    display: flex; align-items: center; justify-content: center;
    border: 3px solid var(--ink-black); border-radius: 50%;
    box-shadow: 4px 4px 0px var(--ink-black);
    position: absolute; top: -35px; left: 20px; transform: rotate(-10deg);
}

.btn-cutout {
    font-family: 'Chewy', cursive; font-size: 1.2rem;
    background-color: var(--brand-green); color: white;
    border: 3px solid var(--ink-black);
    box-shadow: 4px 4px 0px var(--ink-black);
    border-radius: 5px; padding: 10px 25px; transition: 0.2s;
    text-decoration: none; display: inline-block;
}
.btn-cutout:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0px var(--ink-black); background-color: #1f7a70; color: white; }

.navbar { background-color: #fff; border-bottom: 4px solid var(--ink-black); padding: 15px 0; }
.navbar-brand { font-size: 28px; color: var(--brand-red) !important; text-shadow: 2px 2px 0px var(--ink-black); }
.nav-link {
    font-size: 1.2rem; font-weight: 700; color: var(--ink-black) !important;
    border: 2px solid transparent; margin: 0 5px; transition: 0.3s;
}
.nav-link:hover { background-color: var(--brand-yellow); border: 2px solid var(--ink-black); border-radius: 4px; transform: rotate(-2deg); }
.nav-link.active { background-color: var(--brand-yellow); border: 2px solid var(--ink-black); border-radius: 4px; }

.hero-section { padding: 80px 0; position: relative; }
.hero-image-wrapper { position: relative; z-index: 1; }
.hero-blob {
    position: absolute; top: -20px; left: -20px; width: 100%; height: 100%;
    background-color: var(--brand-blue); border: 4px solid var(--ink-black);
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; z-index: -1; transform: rotate(-5deg);
}
.hero-img {
    border: 4px solid var(--ink-black); border-radius: 10px;
    transform: rotate(3deg); box-shadow: 8px 8px 0px rgba(0,0,0,0.1);
    width: 100%; height: 380px; object-fit: cover;
}
@media (max-width: 991px) { .hero-img { height: 280px; } }

.whatsapp-float {
    position: fixed; bottom: 25px; right: 25px; z-index: 1000;
    background-color: #25d366; color: #fff; width: 60px; height: 60px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem; border: 3px solid var(--ink-black);
    box-shadow: 4px 4px 0px var(--ink-black); text-decoration: none;
    transition: transform 0.2s;
}
.whatsapp-float:hover { transform: scale(1.1); color: #fff; }

.btn-login {
    font-family: 'Chewy', cursive; font-size: 1rem;
    background-color: var(--brand-purple); color: white;
    border: 2px solid var(--ink-black);
    box-shadow: 3px 3px 0px var(--ink-black);
    border-radius: 5px; padding: 8px 18px; transition: 0.2s;
    text-decoration: none; display: inline-block;
}
.btn-login:hover { transform: translate(2px, 2px); box-shadow: 1px 1px 0px var(--ink-black); background-color: #6a1fc4; color: white; }

.btn-whatsapp {
    font-family: 'Chewy', cursive; font-size: 1.2rem;
    background-color: #25d366; color: white;
    border: 3px solid var(--ink-black);
    box-shadow: 4px 4px 0px var(--ink-black);
    border-radius: 5px; padding: 10px 25px; transition: 0.2s;
    text-decoration: none; display: inline-block;
}
.btn-whatsapp:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0px var(--ink-black); background-color: #1da851; color: white; }

.programs-section {
    padding: 60px 0; background-color: var(--brand-blue);
    border-top: 4px dashed var(--ink-black); border-bottom: 4px dashed var(--ink-black);
}
.program-card { background-color: #fff; padding: 30px 20px 20px; text-align: center; }

.page-header {
    padding: 60px 0 40px; text-align: center;
    background-color: var(--brand-yellow);
    border-bottom: 4px solid var(--ink-black);
}

.footer { background-color: var(--ink-black); color: white; padding: 50px 0 20px; border-top: 8px solid var(--brand-red); }
.footer h3 { color: var(--brand-yellow); }
.footer a { color: white; text-decoration: none; }
.footer a:hover { color: var(--brand-blue); text-decoration: underline wavy var(--brand-blue) 2px; }

.rotate-left { transform: rotate(-4deg); }
.rotate-right { transform: rotate(5deg); }
.rotate-slight { transform: rotate(2deg); }

.gallery-video {
    width: 100%; height: 240px; object-fit: cover;
    border: 2px solid var(--ink-black);
    background: #000;
}