:root {
    --color-primary: #f10482;
    --color-primary-dark: #c6036b;
    --color-accent: #f59e0b;
    --font-body: system-ui, -apple-system, sans-serif;
    --font-heading: system-ui, -apple-system, sans-serif;
    --hero-background: linear-gradient(to right, #f10482, #c6036b);
  }

  @keyframes cloudDrift  { from { transform: translateX(-140px); } to { transform: translateX(110vw); } }
  @keyframes cloudDrift2 { from { transform: translateX(-90px);  } to { transform: translateX(110vw); } }
  .embellishment-clouds .cloud-el { position: absolute; pointer-events: none; z-index: 0; top: 50%; margin-top: -14px; }
  .embellishment-clouds .cloud-el span { display: block; position: relative; background: rgba(255,255,255,0.88); border-radius: 50px; }
  .embellishment-clouds .cloud-el span::before, .embellishment-clouds .cloud-el span::after { content: ""; position: absolute; background: rgba(255,255,255,0.88); border-radius: 50%; }
  .cloud1 { left: 5%; animation: cloudDrift 28s linear infinite; }
  .cloud1 span { width: 110px; height: 28px; }
  .cloud1 span::before { width: 52px; height: 42px; top: -21px; left: 12px; }
  .cloud1 span::after  { width: 70px; height: 38px; top: -17px; left: 44px; }
  .cloud2 { left: 55%; animation: cloudDrift2 38s linear infinite 8s; }
  .cloud2 span { width: 80px; height: 22px; }
  .cloud2 span::before { width: 38px; height: 30px; top: -15px; left: 8px; }
  .cloud2 span::after  { width: 52px; height: 30px; top: -13px; left: 32px; }
  .cloud3 { left: -80px; animation: cloudDrift 45s linear infinite 16s; }
  .cloud3 span { width: 95px; height: 26px; }
  .cloud3 span::before { width: 44px; height: 36px; top: -18px; left: 10px; }
  .cloud3 span::after  { width: 62px; height: 34px; top: -15px; left: 38px; }