html {
      scroll-behavior: smooth;
    }

    body {
      font-family: 'Sarabun', sans-serif;
    }

    /* Hero gradient mesh */
    .hero-bg {
      background: linear-gradient(135deg, #512C75 0%, #2D1547 50%, #1A0C2E 100%);
      position: relative;
      overflow: hidden;
    }

    .hero-bg::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 60% 50% at 80% 30%, rgba(245, 166, 35, 0.15) 0%, transparent 60%),
        radial-gradient(ellipse 40% 40% at 10% 70%, rgba(107, 58, 150, 0.4) 0%, transparent 60%);
    }

    .hero-bg::after {
      content: '';
      position: absolute;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    }

    /* Card hover */
    .card-hover {
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .card-hover:hover {
      transform: translateY(-6px);
      box-shadow: 0 20px 40px rgba(81, 44, 117, 0.2);
    }

    /* Nav link underline */
    .nav-link::after {
      content: '';
      display: block;
      height: 2px;
      background: #F5A623;
      transform: scaleX(0);
      transition: transform 0.25s ease;
      transform-origin: left;
    }

    .nav-link:hover::after {
      transform: scaleX(1);
    }

    /* Fade-in */
    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .fade-up {
      animation: fadeUp 0.7s ease both;
    }

    .delay-1 {
      animation-delay: 0.15s;
    }

    .delay-2 {
      animation-delay: 0.30s;
    }

    .delay-3 {
      animation-delay: 0.45s;
    }

    .delay-4 {
      animation-delay: 0.60s;
    }

    /* Section divider wave */
    .wave-top {
      background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,30 C360,60 1080,0 1440,30 L1440,60 L0,60 Z' fill='%23512C75'/%3E%3C/svg%3E") no-repeat center/cover;
      height: 60px;
    }

    /* Marquee */
    @keyframes marquee {
      from {
        transform: translateX(0)
      }

      to {
        transform: translateX(-50%)
      }
    }

    .marquee-inner {
      animation: marquee 22s linear infinite;
      display: flex;
      width: 200%;
    }

    .marquee-inner:hover {
      animation-play-state: paused;
    }

    /* Book spine */
    .book-spine {
      background: linear-gradient(180deg, #6B3A96 0%, #512C75 100%);
      border-left: 4px solid #F5A623;
    }

    /* Firefox badge pulse */
    @keyframes pulse {

      0%,
      100% {
        box-shadow: 0 0 0 0 rgba(245, 166, 35, 0.5)
      }

      50% {
        box-shadow: 0 0 0 10px rgba(245, 166, 35, 0)
      }
    }

    .pulse {
      animation: pulse 2s ease infinite;
    }