:root {
      --sky-top: #bfe8ff;
      --sky-mid: #dff5ff;
      --sky-bottom: #fff1f7;
      --pink-main: #ff93bf;
      --pink-soft: #ffc3db;
      --pink-deep: #f471ab;
      --cream: #fffaf5;
      --mint: #d8f5ef;
      --grass: #b6e6a8;
      --leaf: #7fb676;
      --trunk: #8a5b51;
      --text: #7b5170;
      --shadow: 0 22px 48px rgba(162, 108, 145, 0.18);
    }

    * {
      box-sizing: border-box;
    }

    html, body {
      margin: 0;
      min-width: 320px;
      font-family: "Trebuchet MS", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
      color: var(--text);
      background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 45%, var(--sky-bottom) 100%);
      overflow-x: hidden;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      background:
        radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.8), transparent 18%),
        radial-gradient(circle at 80% 14%, rgba(255, 255, 255, 0.72), transparent 16%),
        radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.45), transparent 22%);
      pointer-events: none;
      z-index: 0;
    }

    .page {
      position: relative;
      min-height: 100vh;
      overflow: hidden;
      isolation: isolate;
    }

    .sky-decor,
    .petal,
    .sparkle {
      position: absolute;
      pointer-events: none;
    }

    .cloud {
      width: 210px;
      height: 70px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.82);
      box-shadow:
        46px -18px 0 12px rgba(255, 255, 255, 0.92),
        104px -5px 0 8px rgba(255, 255, 255, 0.85),
        152px -20px 0 0 rgba(255, 255, 255, 0.8);
      filter: blur(1px);
      animation: drift 24s linear infinite;
      z-index: 1;
    }

    .cloud.one { top: 7%; left: -40px; }
    .cloud.two { top: 16%; right: -50px; transform: scale(0.85); animation-duration: 28s; animation-direction: reverse; }
    .cloud.three { top: 29%; left: 8%; transform: scale(0.62); animation-duration: 22s; }

    .sparkle {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.9);
      box-shadow: 0 0 16px rgba(255, 255, 255, 0.95);
      animation: twinkle 3s ease-in-out infinite;
      z-index: 1;
    }

    .wrap {
      position: relative;
      z-index: 2;
      width: min(calc(100% - 28px), 1280px);
      margin: 0 auto;
      padding: 34px 0 46px;
    }

    .hero {
      position: relative;
      min-height: 78vh;
      padding: 26px 18px 220px;
      border-radius: 42px;
      background:
        radial-gradient(circle at 50% 60%, rgba(255, 210, 228, 0.28), transparent 24%),
        radial-gradient(circle at 50% 82%, rgba(188, 232, 181, 0.38), transparent 30%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.1)),
        linear-gradient(180deg, rgba(191, 232, 255, 0.34), rgba(255, 241, 247, 0.24) 60%, rgba(221, 243, 205, 0.32) 100%);
      border: 1px solid rgba(255, 255, 255, 0.45);
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .hero-copy {
      position: relative;
      z-index: 4;
      text-align: center;
      padding-top: 8px;
    }

    .eyebrow {
      margin: 0;
      letter-spacing: 0.3em;
      font-size: 0.82rem;
      color: #7ba9cf;
    }

    .title {
      margin: 16px 0 10px;
      font-size: clamp(2.6rem, 7vw, 5.6rem);
      line-height: 0.95;
      color: #ff7eb4;
      text-shadow: 0 12px 26px rgba(255, 144, 188, 0.22);
    }

    .subtitle {
      width: min(100%, 46rem);
      margin: 0 auto;
      line-height: 1.8;
      font-size: 1.02rem;
      color: #8e7192;
    }

    .scene {
      position: relative;
      min-height: 620px;
      margin-top: 16px;
    }

    .scene::before {
      content: "";
      position: absolute;
      left: 50%;
      bottom: 120px;
      width: min(56vw, 640px);
      height: 320px;
      transform: translateX(-50%);
      background:
        radial-gradient(circle at 50% 35%, rgba(255, 198, 222, 0.42), transparent 36%),
        radial-gradient(circle at 50% 78%, rgba(190, 234, 177, 0.4), transparent 50%);
      filter: blur(24px);
      z-index: 1;
      pointer-events: none;
    }

    .photo-card {
      position: absolute;
      top: 150px;
      width: min(27vw, 300px);
      min-width: 200px;
      padding: 14px 14px 18px;
      border-radius: 30px;
      background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255, 242, 247, 0.92));
      box-shadow: 0 18px 40px rgba(169, 119, 154, 0.2);
      border: 1px solid rgba(255,255,255,0.7);
      z-index: 3;
      text-decoration: none;
    }

    .photo-card::before {
      content: "";
      position: absolute;
      inset: 10px;
      border-radius: 22px;
      border: 2px dashed rgba(255, 155, 196, 0.4);
      pointer-events: none;
    }

    .photo-card.left {
      left: clamp(6px, 4vw, 48px);
      transform: rotate(-7deg) translateY(24px) scale(0.94);
    }

    .photo-card.right {
      right: clamp(6px, 4vw, 48px);
      transform: rotate(7deg);
    }

    .photo-card img {
      display: block;
      width: 100%;
      aspect-ratio: 4 / 5;
      object-fit: cover;
      border-radius: 22px;
    }

    .photo-card p {
      margin: 12px 0 0;
      text-align: center;
      color: #b57ca0;
      font-size: 0.95rem;
    }

    .hill {
      position: absolute;
      left: 50%;
      bottom: 88px;
      transform: translateX(-50%);
      border-radius: 50%;
      z-index: 1;
    }

    .hill.back {
      width: 76%;
      height: 180px;
      background: linear-gradient(180deg, rgba(219, 242, 213, 0.95), rgba(184, 226, 166, 0.92));
      filter: blur(1px);
    }

    .hill.front {
      width: 110%;
      height: 220px;
      bottom: 18px;
      background:
        radial-gradient(circle at 50% 0, rgba(255, 220, 234, 0.3), transparent 28%),
        linear-gradient(180deg, #cdeebe, #9fda8d);
      z-index: 2;
    }

    .tree {
      position: absolute;
      left: 50%;
      bottom: 112px;
      width: min(46vw, 520px);
      aspect-ratio: 1 / 1;
      transform: translateX(-50%);
      z-index: 4;
      pointer-events: none;
    }

    .tree::before {
      content: "";
      position: absolute;
      left: 50%;
      bottom: 8px;
      width: 78%;
      height: 26%;
      transform: translateX(-50%);
      background: radial-gradient(circle, rgba(255, 196, 220, 0.26) 0%, rgba(167, 216, 154, 0.2) 42%, transparent 72%);
      filter: blur(18px);
    }

    .tree img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
      filter:
        drop-shadow(0 18px 24px rgba(151, 101, 126, 0.14))
        drop-shadow(0 6px 10px rgba(255, 214, 229, 0.2));
    }

    .petals {
      position: absolute;
      inset: 0;
      z-index: 5;
      overflow: hidden;
      pointer-events: none;
    }

    .petal {
      top: -8%;
      width: var(--petal-size, 18px);
      height: calc(var(--petal-size, 18px) * 0.72);
      opacity: var(--petal-opacity, 0.82);
      filter: drop-shadow(0 8px 10px rgba(255, 146, 191, 0.18));
      animation: petal-fall var(--fall-duration, 14s) linear infinite;
    }

    .petal::before,
    .petal::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 78% 22% 76% 24%;
      transform-origin: 50% 65%;
    }

    .petal::before {
      background:
        radial-gradient(circle at 28% 24%, rgba(255, 255, 255, 0.92) 0 16%, rgba(255, 255, 255, 0) 17%),
        linear-gradient(135deg, #fff7fb 0%, #ffd2e4 32%, #ff9ec4 100%);
      box-shadow:
        inset -2px -3px 0 rgba(255, 140, 184, 0.22),
        inset 2px 2px 0 rgba(255, 255, 255, 0.65);
      animation: petal-spin var(--spin-duration, 5.2s) ease-in-out infinite;
    }

    .petal::after {
      inset: 18% 45% 14% auto;
      width: 1px;
      height: 58%;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.68);
      transform: rotate(16deg);
    }

    .ground-decor {
      position: absolute;
      bottom: 76px;
      left: 0;
      width: 100%;
      height: 70px;
      z-index: 3;
      pointer-events: none;
    }

    .flower {
      position: absolute;
      bottom: 0;
      width: 24px;
      height: 24px;
      background: radial-gradient(circle, #fff0f7 0%, #ff9cc7 58%, #ff7db6 100%);
      border-radius: 50%;
      box-shadow:
        14px 4px 0 -4px #ff9cc7,
        -14px 6px 0 -4px #ffb5d6,
        4px -14px 0 -4px #ffc9df,
        -5px -12px 0 -4px #ffa9ce;
      opacity: 0.86;
    }

    .cats-section {
      position: relative;
      margin-top: -26px;
      padding: 42px 18px 18px;
      border-radius: 36px;
      background: linear-gradient(180deg, rgba(255, 250, 245, 0.92), rgba(255, 241, 247, 0.96));
      box-shadow: var(--shadow);
      border: 1px solid rgba(255, 255, 255, 0.68);
      z-index: 3;
    }

    .cats-title {
      margin: 0;
      text-align: center;
      font-size: clamp(1.9rem, 4vw, 3rem);
      color: #f479ac;
    }

    .cats-subtitle {
      margin: 10px auto 28px;
      width: min(100%, 40rem);
      text-align: center;
      line-height: 1.8;
      color: #9a7291;
    }

    .cats-row {
      display: grid;
      grid-template-columns: repeat(7, minmax(110px, 1fr));
      gap: 14px;
      align-items: end;
    }

    .cat-card {
      position: relative;
      padding-top: 10px;
      text-align: center;
      animation: bounce 3.6s ease-in-out infinite;
    }

    .cat-card:nth-child(2) { animation-delay: 0.2s; }
    .cat-card:nth-child(3) { animation-delay: 0.4s; }
    .cat-card:nth-child(4) { animation-delay: 0.6s; }
    .cat-card:nth-child(5) { animation-delay: 0.8s; }
    .cat-card:nth-child(6) { animation-delay: 1s; }
    .cat-card:nth-child(7) { animation-delay: 1.2s; }

    .cat {
      position: relative;
      width: 112px;
      height: 134px;
      margin: 0 auto;
    }

    .cat .ear {
      position: absolute;
      top: 8px;
      width: 28px;
      height: 32px;
      background: var(--fur, #fff3e7);
      clip-path: polygon(50% 0, 0 100%, 100% 100%);
    }

    .cat .ear::after {
      content: "";
      position: absolute;
      inset: 8px 6px 4px;
      background: var(--inner, #ffc8d9);
      clip-path: polygon(50% 0, 0 100%, 100% 100%);
    }

    .cat .ear.left { left: 18px; transform: rotate(-10deg); }
    .cat .ear.right { right: 18px; transform: rotate(10deg); }

    .cat .head {
      position: absolute;
      top: 20px;
      left: 50%;
      width: 80px;
      height: 72px;
      transform: translateX(-50%);
      background: var(--fur, #fff3e7);
      border-radius: 48% 48% 44% 44%;
      box-shadow: inset 0 -8px 0 rgba(255,255,255,0.28);
    }

    .cat .body {
      position: absolute;
      bottom: 4px;
      left: 50%;
      width: 76px;
      height: 72px;
      transform: translateX(-50%);
      background: var(--fur, #fff3e7);
      border-radius: 48% 48% 36% 36%;
    }

    .cat .paw {
      position: absolute;
      bottom: 2px;
      width: 18px;
      height: 18px;
      background: #fff8f2;
      border-radius: 50%;
    }

    .cat .paw.left { left: 30px; }
    .cat .paw.right { right: 30px; }

    .cat .eye {
      position: absolute;
      top: 48px;
      width: 8px;
      height: 12px;
      background: #5b4658;
      border-radius: 50%;
    }

    .cat .eye.left { left: 36px; }
    .cat .eye.right { right: 36px; }

    .cat .nose {
      position: absolute;
      left: 50%;
      top: 58px;
      width: 10px;
      height: 8px;
      transform: translateX(-50%);
      background: #ff95b6;
      border-radius: 50% 50% 65% 65%;
    }

    .cat .mouth {
      position: absolute;
      left: 50%;
      top: 66px;
      width: 24px;
      height: 12px;
      transform: translateX(-50%);
    }

    .cat .mouth::before,
    .cat .mouth::after {
      content: "";
      position: absolute;
      top: 0;
      width: 12px;
      height: 10px;
      border-bottom: 2px solid #91667f;
      border-radius: 0 0 14px 14px;
    }

    .cat .mouth::before { left: 0; transform: rotate(8deg); }
    .cat .mouth::after { right: 0; transform: rotate(-8deg); }

    .cat .blush {
      position: absolute;
      top: 58px;
      width: 14px;
      height: 8px;
      background: rgba(255, 166, 197, 0.58);
      border-radius: 999px;
      filter: blur(0.5px);
    }

    .cat .blush.left { left: 20px; }
    .cat .blush.right { right: 20px; }

    .cat .tail {
      position: absolute;
      right: 10px;
      bottom: 34px;
      width: 52px;
      height: 16px;
      border: 10px solid var(--fur, #fff3e7);
      border-left: none;
      border-bottom: none;
      border-radius: 0 36px 0 0;
      transform: rotate(24deg);
      transform-origin: left bottom;
    }

    .cat .bow {
      position: absolute;
      top: 24px;
      right: 22px;
      width: 20px;
      height: 12px;
      background: #ff8fbc;
      border-radius: 999px;
      box-shadow: -9px 0 0 #ff8fbc, 9px 0 0 #ff8fbc;
    }

    .cat-name {
      margin-top: 10px;
      font-size: 0.92rem;
      color: #a1688d;
    }

    .cat-1 { --fur: #fff5eb; --inner: #ffd4e0; }
    .cat-2 { --fur: #f5f0ff; --inner: #e7d8ff; }
    .cat-3 { --fur: #fff0f3; --inner: #ffd0da; }
    .cat-4 { --fur: #fff7d9; --inner: #ffd7c0; }
    .cat-5 { --fur: #eef9ff; --inner: #cbefff; }
    .cat-6 { --fur: #fff0e0; --inner: #ffd2b3; }
    .cat-7 { --fur: #f4ffe8; --inner: #dff2bc; }

    @keyframes drift {
      from { transform: translateX(0); }
      to { transform: translateX(90px); }
    }

    @keyframes twinkle {
      0%, 100% { opacity: 0.35; transform: scale(0.8); }
      50% { opacity: 1; transform: scale(1.1); }
    }

    @keyframes petal-fall {
      0% {
        transform: translate3d(0, -10vh, 0) rotate(0deg) scale(var(--petal-scale, 0.8));
        opacity: 0;
      }
      12% {
        opacity: var(--petal-opacity, 0.82);
      }
      45% {
        transform: translate3d(calc(var(--drift, 40px) * 0.35), 42vh, 0) rotate(140deg) scale(calc(var(--petal-scale, 0.8) + 0.04));
      }
      100% {
        transform: translate3d(var(--drift, 40px), 108vh, 0) rotate(320deg) scale(calc(var(--petal-scale, 0.8) + 0.08));
        opacity: 0.12;
      }
    }

    @keyframes petal-spin {
      0%, 100% {
        transform: rotate(-18deg) skewX(0deg) scaleX(1);
      }
      25% {
        transform: rotate(8deg) skewX(-6deg) scaleX(0.96);
      }
      50% {
        transform: rotate(22deg) skewX(6deg) scaleX(1.02);
      }
      75% {
        transform: rotate(-10deg) skewX(-4deg) scaleX(0.98);
      }
    }

    @keyframes bounce {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-9px); }
    }

    @media (max-width: 1120px) {
      .cats-row {
        grid-template-columns: repeat(4, minmax(110px, 1fr));
        justify-items: center;
      }
    }

    @media (max-width: 860px) {
      .hero {
        padding-bottom: 190px;
      }

      .scene {
        min-height: 640px;
      }

      .photo-card {
        top: 190px;
        width: min(24vw, 210px);
        min-width: 140px;
      }

      .photo-card.left {
        left: clamp(4px, 2vw, 18px);
        transform: rotate(-6deg) translateY(12px) scale(0.92);
      }

      .photo-card.right {
        right: clamp(4px, 2vw, 18px);
        transform: rotate(6deg) scale(0.92);
      }

      .tree {
        width: min(50vw, 360px);
        bottom: 118px;
      }

      .hill.back {
        width: 96%;
      }

      .cats-row {
        grid-template-columns: repeat(7, minmax(110px, 1fr));
        min-width: 840px;
      }
    }

    @media (max-width: 520px) {
      .wrap {
        width: min(calc(100% - 14px), 1280px);
        padding-top: 10px;
      }

      .hero,
      .cats-section {
        border-radius: 24px;
      }

      .hero {
        padding-inline: 12px;
      }

      .scene {
        min-height: 560px;
      }

      .photo-card {
        top: 214px;
        width: min(32vw, 165px);
        min-width: 110px;
        padding: 10px 10px 14px;
      }

      .photo-card.left {
        left: 2px;
        transform: rotate(-5deg) translateY(10px) scale(0.88);
      }

      .photo-card.right {
        right: 2px;
        transform: rotate(5deg) scale(0.88);
      }

      .tree {
        width: min(54vw, 240px);
        bottom: 112px;
      }

      .cats-row {
        grid-template-columns: 1fr;
        min-width: 0;
      }
    }