* { font-family: 'Cabin Sketch', cursive; }
    html, body { height: 100%; margin: 0; }
    .app-wrapper { height: 100%; width: 100%; overflow-x: hidden; overflow-y: auto; }
    
    .diagonal-split { background: linear-gradient(135deg, #B6FFFA 50%, #AED2FF 50%); }
    .diagonal-stripes { background: repeating-linear-gradient(45deg, #B6FFFA, #B6FFFA 20px, #AED2FF 20px, #AED2FF 40px); }
    
    .zigzag-top {
      position: relative;
    }
    .zigzag-top::before {
      content: '';
      position: absolute;
      top: -20px;
      left: 0;
      right: 0;
      height: 20px;
      background: linear-gradient(135deg, #000 25%, transparent 25%) -20px 0,
                  linear-gradient(225deg, #000 25%, transparent 25%) -20px 0,
                  linear-gradient(315deg, #000 25%, transparent 25%),
                  linear-gradient(45deg, #000 25%, transparent 25%);
      background-size: 40px 40px;
    }
    
    @keyframes float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-10px) rotate(3deg); } }
    @keyframes floatSlow { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-15px) rotate(2deg); } }
    @keyframes bounce-gentle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
    @keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 5px #F72798; } 50% { box-shadow: 0 0 20px #F72798, 0 0 30px #F72798; } }
    
    .float { animation: float 3s ease-in-out infinite; }
    .float-slow { animation: floatSlow 4s ease-in-out infinite; }
    .float-delay-1 { animation-delay: 0.5s; }
    .float-delay-2 { animation-delay: 1s; }
    .float-delay-3 { animation-delay: 1.5s; }
    
    .card-tilt { transform: rotate(-2deg); transition: all 0.3s ease; }
    .card-tilt:hover { transform: rotate(0deg) scale(1.02); }
    .card-tilt-right { transform: rotate(2deg); transition: all 0.3s ease; }
    .card-tilt-right:hover { transform: rotate(0deg) scale(1.02); }
    
    .nav-btn { transform: rotate(-3deg); transition: all 0.3s ease; }
    .nav-btn:nth-child(2) { transform: rotate(2deg); }
    .nav-btn:nth-child(3) { transform: rotate(-1deg); }
    .nav-btn:nth-child(4) { transform: rotate(3deg); }
    .nav-btn:nth-child(5) { transform: rotate(-2deg); }
    .nav-btn:hover { background: #EBF400 !important; color: #F72798 !important; transform: rotate(0deg) scale(1.1); }
    
    .icon-hover { transition: all 0.3s ease; }
    .icon-hover:hover { transform: rotate(10deg) scale(1.1); }
    
    .reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s ease; }
    .reveal.active { opacity: 1; transform: translateY(0); }
    .reveal-left { opacity: 0; transform: translateX(-50px); transition: all 0.8s ease; }
    .reveal-left.active { opacity: 1; transform: translateX(0); }
    .reveal-right { opacity: 0; transform: translateX(50px); transition: all 0.8s ease; }
    .reveal-right.active { opacity: 1; transform: translateX(0); }
    
    .scroll-container { scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
    .scroll-item { scroll-snap-align: start; }
    .progress-animate { transition: width 1s ease-in-out; }
    
    .mobile-menu { transform: translateX(100%); transition: transform 0.3s ease; }
    .mobile-menu.active { transform: translateX(0); }
    .doodle { position: absolute; opacity: 0.6; }