body {
      font-family: 'Quicksand', sans-serif;
      background: 
        radial-gradient(circle at 10% 15%, rgba(31,167,232,0.12) 0%, transparent 40%),
        radial-gradient(circle at 85% 20%, rgba(248,185,30,0.15) 0%, transparent 35%),
        radial-gradient(circle at 50% 80%, rgba(120,184,42,0.1) 0%, transparent 50%),
        linear-gradient(to bottom, #fffdf7, #fff8e9);
    }

    h1, h2, h3, h4, .font-heading {
      font-family: 'Fredoka', sans-serif;
    }

    /* Beautiful custom scrollbar */
    ::-webkit-scrollbar {
      width: 10px;
    }
    ::-webkit-scrollbar-track {
      background: #fff8e9;
    }
    ::-webkit-scrollbar-thumb {
      background: #cbdcf0;
      border-radius: 10px;
    }
    ::-webkit-scrollbar-thumb:hover {
      background: #a5c3e8;
    }

    /* 3D Book Hover Mechanics */
    .book-container {
      perspective: 1200px;
    }
    .book-wrap {
      transform-style: preserve-3d;
      transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    .book-container:hover .book-wrap {
      transform: rotateY(-22deg) rotateX(8deg) translateY(-8px);
    }
    .hero-book-wrap {
      transform: rotateY(-14deg) rotateX(5deg) rotateZ(-2deg);
    }
    .hero-book-cover {
      position: absolute;
      inset: 0;
      overflow: hidden;
      border-radius: 0 1.35rem 1.35rem 0;
      border: 1px solid rgba(16,32,51,.12);
      box-shadow: 0 28px 60px rgba(16,32,51,.18);
      transform: translateZ(18px);
      background: #fff;
    }
    .hero-book-spine {
      position: absolute;
      top: 1.5%;
      bottom: 1.5%;
      left: -8px;
      width: 34px;
      border-radius: .5rem 0 0 .5rem;
      background: linear-gradient(90deg, #071827, #0c2237 62%, #16415d);
      transform: rotateY(-72deg) translateZ(6px);
      transform-origin: right center;
      box-shadow: inset -8px 0 16px rgba(255,255,255,.08), -8px 12px 24px rgba(16,32,51,.2);
    }
    .hero-book-pages {
      position: absolute;
      top: 3%;
      right: -14px;
      bottom: 3%;
      width: 30px;
      border-radius: 0 1rem 1rem 0;
      background: repeating-linear-gradient(90deg, #fffdf7 0 4px, #edf2f7 4px 5px);
      transform: translateZ(4px) skewY(2deg);
      box-shadow: 12px 18px 28px rgba(16,32,51,.12);
    }
    .hero-book-shadow {
      position: absolute;
      left: 5%;
      right: -10%;
      bottom: -8%;
      height: 16%;
      border-radius: 999px;
      background: rgba(16,32,51,.16);
      filter: blur(18px);
      transform: translateZ(-20px) rotateZ(2deg);
    }

    /* Soft floating elements animation */
    @keyframes floatSlow {
      0%, 100% { transform: translateY(0px) rotate(0deg); }
      50% { transform: translateY(-10px) rotate(2deg); }
    }
    .floating-cloud {
      animation: floatSlow 8s ease-in-out infinite;
    }
    .floating-cloud-delay {
      animation: floatSlow 11s ease-in-out infinite;
      animation-delay: 2s;
    }

    /* Sparkle twinkle animation */
    @keyframes sparkle {
      0%, 100% { opacity: 0.3; transform: scale(0.8); }
      50% { opacity: 1; transform: scale(1.2); }
    }
    .sparkle-icon {
      animation: sparkle 3s ease-in-out infinite;
    }

    /* Custom shadow variables */
    .soft-shadow {
      box-shadow: 0 20px 50px rgba(16,32,51,0.08);
    }
    .card-shadow-hover {
      transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    }
    .card-shadow-hover:hover {
      transform: translateY(-6px);
      box-shadow: 0 30px 60px rgba(16,32,51,0.12);
    }
.logo-img { max-height: 56px; width: auto; object-fit: contain; }
.preview-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: .85rem;
  border: 1px solid rgba(16,32,51,.08);
  box-shadow: 0 12px 28px rgba(16,32,51,.08);
}
.preview-page-frame {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  background: #fffdf7;
  padding: .6rem;
  border: 1px solid rgba(31,167,232,.12);
}
.preview-page-frame::after {
  content: "Preview - My Bibo Club";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: rotate(-18deg);
  translate: -50% -50%;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  letter-spacing: .08em;
  font-size: clamp(1.25rem, 4vw, 2.6rem);
  color: rgba(31,167,232,.12);
  white-space: nowrap;
  pointer-events: none;
}