:root {
      --bg: linear-gradient(to bottom, #87CEEB 0%, #E0F6FF 100%);
      --primary-color: #000;
      --secondary-color: #ff69b4;
      --text: #000;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      min-height: 100vh;
      background: var(--bg);
      font-family: system-ui, sans-serif;
      overflow: hidden;
      position: relative;
    }

    /* ---------- Hero ---------- */
    .hero {
      width: 100vw;
      height: min(60vh, 520px);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .hero object {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    /* ---------- Title ---------- */
    .title {
      position: absolute;
      bottom: clamp(2rem, 6vh, 4rem);
      left: 50%;
      transform: translateX(-50%);
      text-align: center;
      color: var(--primary-color);
      font-weight: 800;
      font-size: clamp(2rem, 5vw, 3.5rem);
    }

    .title span {
      color: var(--secondary-color);
    }

    .title p {
      margin-top: 0.75rem;
      font-size: clamp(1rem, 2.2vw, 1.5rem);
      font-weight: 600;
      line-height: 1.5;
      color: var(--text);
    }

    /* ===== Cloud Base ===== */
    .cloud {
      position: absolute;
      background: #fff;
      border-radius: 999px;
      opacity: 0.9;

      /* base unit */
      --cloud-size: 16vw;
      width: var(--cloud-size);
      height: calc(var(--cloud-size) * 0.38);
    }

    /* Lobes */
    .cloud::before,
    .cloud::after {
      content: '';
      position: absolute;
      background: #fff;
      border-radius: 50%;
    }

    /* Left lobe */
    .cloud::before {
      width: 45%;
      height: 100%;
      top: -50%;
      left: 12%;
    }

    /* Right lobe */
    .cloud::after {
      width: 50%;
      height: 90%;
      top: -35%;
      right: 12%;
    }

    /* ===== Cloud Sizes (Shape Safe) ===== */
    .cloud-type-c { --cloud-size: 22vw; } /* large */
    .cloud-type-b { --cloud-size: 18vw; } /* medium */
    .cloud-type-a { --cloud-size: 15vw; } /* normal */
    .cloud-type-e { --cloud-size: 12vw; } /* small */
    .cloud-type-d { --cloud-size: 9vw; } /* tiny */

    /* ---------- Cloud Rows (Duplicated) ---------- */
    .cloud-row-1 { top: 10%; animation: cloud-move 45s linear infinite; }
    .cloud-row-2 { top: 30%; animation: cloud-move 30s linear infinite; }
    .cloud-row-3 { top: 50%; animation: cloud-move 60s linear infinite; }

    /* Duplicate clouds per row */
    .cloud-row-1.cloud-1 { left: -30%; }
    .cloud-row-1.cloud-2 { left: 20%; }
    .cloud-row-1.cloud-3 { left: 70%; }

    .cloud-row-2.cloud-1 { left: -40%; }
    .cloud-row-2.cloud-2 { left: 15%; }
    .cloud-row-2.cloud-3 { left: 65%; }

    .cloud-row-3.cloud-1 { left: -35%; }
    .cloud-row-3.cloud-2 { left: 25%; }
    .cloud-row-3.cloud-3 { left: 75%; }

    @keyframes cloud-move {
      from { transform: translateX(0); }
      to { transform: translateX(140vw); }
    }

    /* ---------- Mobile ---------- */
    @media (max-width: 768px) {
      .hero {
        height: 45vh;
      }

    .cloud-type-d { --cloud-size: 34vw; }
    .cloud-type-b { --cloud-size: 28vw; }
    .cloud-type-a { --cloud-size: 24vw; }
    .cloud-type-s { --cloud-size: 18vw; }
    .cloud-type-xs { --cloud-size: 14vw; }
    }