/* UnitDime R12R7: refined mobile hero moodboard accents and background polish. */
@media (max-width:700px) {
  body.mp-public .mp-public-shell > header,
  body.mp-public .site-header,
  body.mp-public .mp-site-header {
    background:linear-gradient(180deg, #fff 0%, #fcf9ff 100%) !important;
    box-shadow:0 1px 0 rgba(120,86,196,.08);
  }

  body.mp-public .mp-hero {
    position:relative;
    background:
      radial-gradient(260px 180px at 87% 22%, rgba(174,147,255,.14), rgba(174,147,255,0) 70%),
      radial-gradient(190px 140px at 74% 41%, rgba(126,220,196,.10), rgba(126,220,196,0) 74%),
      radial-gradient(220px 160px at 96% 4%, rgba(255,255,255,.92), rgba(255,255,255,0) 72%),
      linear-gradient(180deg, #fdfbff 0%, #f7f2ff 46%, #f7f8fc 100%) !important;
    overflow:hidden;
  }
  body.mp-public .mp-hero::before {
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
      radial-gradient(220px 180px at 88% 28%, rgba(173,147,255,.18), rgba(173,147,255,.05) 38%, rgba(173,147,255,0) 72%),
      radial-gradient(110px 86px at 78% 36%, rgba(255,255,255,.76), rgba(255,255,255,0) 74%);
    opacity:.95;
    z-index:0;
  }
  body.mp-public .mp-hero::after {
    content:"";
    position:absolute;
    left:-8%;
    right:-8%;
    bottom:-70px;
    height:160px;
    pointer-events:none;
    background:radial-gradient(50% 100% at 50% 0%, rgba(247,248,252,0) 0%, rgba(247,248,252,.72) 58%, #f7f8fc 100%);
    z-index:0;
  }
  body.mp-public .mp-hero > * { position:relative; z-index:1; }

  body.mp-public .mp-hero .mp-hero-grid-bg {
    opacity:.26;
    background-image:
      linear-gradient(rgba(141,119,212,.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(141,119,212,.05) 1px, transparent 1px);
    background-size:54px 54px;
    background-position:center center;
    mask-image:radial-gradient(circle at 78% 30%, rgba(0,0,0,.98), rgba(0,0,0,.76) 52%, rgba(0,0,0,.28) 88%, transparent 100%);
    -webkit-mask-image:radial-gradient(circle at 78% 30%, rgba(0,0,0,.98), rgba(0,0,0,.76) 52%, rgba(0,0,0,.28) 88%, transparent 100%);
  }

  body.mp-public .mp-hero .mp-hero-copy {
    padding-top:10px;
  }
  body.mp-public .mp-hero .mp-hero-copy h1 {
    max-width:8.15ch !important;
    line-height:1.03 !important;
  }

  /* Recompose accent elements into the spaces highlighted by the user. */
  body.mp-public .mp-hero .ud-r12r5-mobile-accents {
    position:absolute;
    top:10px;
    right:0;
    width:158px;
    height:176px;
    pointer-events:none;
    z-index:1;
  }
  body.mp-public .mp-hero .ud-r12r5-accent {
    position:absolute;
    display:grid;
    place-items:center;
    width:40px;
    height:40px;
    border-radius:14px;
    border:1px solid rgba(138,110,220,.18);
    box-shadow:
      0 10px 20px rgba(78,56,150,.11),
      inset 0 1px 0 rgba(255,255,255,.96),
      0 0 0 1px rgba(255,255,255,.55);
    overflow:visible;
  }
  body.mp-public .mp-hero .ud-r12r5-accent svg {
    width:19px;
    height:19px;
    stroke-width:1.9;
  }
  body.mp-public .mp-hero .ud-r12r5-accent:first-child {
    top:2px;
    right:38px;
    transform:rotate(-11deg);
    background:linear-gradient(155deg, #fff 0%, #f2e9ff 84%);
    color:#7953d6;
  }
  body.mp-public .mp-hero .ud-r12r5-accent:nth-child(2) {
    top:10px;
    right:0;
    transform:rotate(8deg);
    background:linear-gradient(155deg, #fff 0%, #e7faf4 84%);
    color:#218e7b;
  }
  body.mp-public .mp-hero .ud-r12r5-accent::after {
    content:"";
    position:absolute;
    inset:auto auto -5px -5px;
    width:10px;
    height:10px;
    border-radius:999px;
    background:rgba(255,255,255,.78);
    box-shadow:0 0 0 1px rgba(135,109,214,.14);
  }

  body.mp-public .mp-hero .ud-r12r5-mobile-accents::before,
  body.mp-public .mp-hero .ud-r12r5-mobile-accents::after {
    content:"";
    position:absolute;
    pointer-events:none;
  }
  /* small rounded chunk in the middle-right empty space */
  body.mp-public .mp-hero .ud-r12r5-mobile-accents::before {
    top:70px;
    right:78px;
    width:52px;
    height:18px;
    border-radius:999px;
    background:linear-gradient(90deg, rgba(193,173,251,.28), rgba(193,173,251,.08));
    transform:rotate(-17deg);
    box-shadow:0 8px 16px rgba(108,84,183,.07);
  }
  /* soft abstract glow / rounded block lower-right, still above the card */
  body.mp-public .mp-hero .ud-r12r5-mobile-accents::after {
    right:-2px;
    top:118px;
    width:82px;
    height:50px;
    border-radius:24px;
    background:
      linear-gradient(140deg, rgba(255,255,255,.7), rgba(245,238,255,.18)),
      radial-gradient(circle at 35% 35%, rgba(255,255,255,.56), rgba(255,255,255,0) 60%);
    border:1px solid rgba(181,160,245,.16);
    box-shadow:0 12px 22px rgba(98,72,168,.08);
    transform:rotate(14deg);
  }

  /* faint design dots to keep the section lively without clutter */
  body.mp-public .mp-hero .mp-hero-copy::before,
  body.mp-public .mp-hero .mp-hero-copy::after {
    content:"";
    position:absolute;
    pointer-events:none;
    border-radius:999px;
    background:rgba(153,126,233,.18);
    z-index:0;
  }
  body.mp-public .mp-hero .mp-hero-copy::before {
    width:7px;
    height:7px;
    right:34px;
    top:112px;
  }
  body.mp-public .mp-hero .mp-hero-copy::after {
    width:5px;
    height:5px;
    right:16px;
    top:162px;
    background:rgba(126,220,196,.18);
  }

  @keyframes ud-r12r7-drift-a {
    0%,100%{transform:translate3d(0,0,0) rotate(-11deg)}
    50%{transform:translate3d(0,-4px,0) rotate(-8deg)}
  }
  @keyframes ud-r12r7-drift-b {
    0%,100%{transform:translate3d(0,0,0) rotate(8deg)}
    50%{transform:translate3d(0,-5px,0) rotate(4deg)}
  }
  @keyframes ud-r12r7-drift-c {
    0%,100%{transform:translate3d(0,0,0) rotate(-17deg)}
    50%{transform:translate3d(0,-3px,0) rotate(-13deg)}
  }
  @keyframes ud-r12r7-drift-d {
    0%,100%{transform:translate3d(0,0,0) rotate(14deg)}
    50%{transform:translate3d(0,-4px,0) rotate(10deg)}
  }
  :root:not(.mp-reduce-motion) body.mp-public .mp-hero .ud-r12r5-accent:first-child { animation:ud-r12r7-drift-a 7.2s ease-in-out infinite; }
  :root:not(.mp-reduce-motion) body.mp-public .mp-hero .ud-r12r5-accent:nth-child(2) { animation:ud-r12r7-drift-b 8s ease-in-out infinite; }
  :root:not(.mp-reduce-motion) body.mp-public .mp-hero .ud-r12r5-mobile-accents::before { animation:ud-r12r7-drift-c 8.6s ease-in-out infinite; }
  :root:not(.mp-reduce-motion) body.mp-public .mp-hero .ud-r12r5-mobile-accents::after { animation:ud-r12r7-drift-d 9s ease-in-out infinite; }

  body.mp-public .mp-hero .mp-hero-visual { margin-top:4px!important; }
}

@media (max-width:430px) {
  body.mp-public .mp-hero .mp-hero-grid-bg { background-size:48px 48px; }
  body.mp-public .mp-hero .ud-r12r5-mobile-accents {
    width:146px;
    height:168px;
    top:8px;
  }
  body.mp-public .mp-hero .ud-r12r5-accent {
    width:37px;
    height:37px;
  }
  body.mp-public .mp-hero .ud-r12r5-accent:first-child { right:35px; }
  body.mp-public .mp-hero .ud-r12r5-accent:nth-child(2) { right:0; top:8px; }
  body.mp-public .mp-hero .ud-r12r5-mobile-accents::before {
    top:66px;
    right:72px;
    width:46px;
  }
  body.mp-public .mp-hero .ud-r12r5-mobile-accents::after {
    top:112px;
    width:74px;
    height:44px;
  }
}

@media (max-width:360px) {
  body.mp-public .mp-hero .mp-hero-grid-bg { background-size:44px 44px; }
  body.mp-public .mp-hero .ud-r12r5-mobile-accents {
    width:128px;
    height:156px;
  }
  body.mp-public .mp-hero .ud-r12r5-accent {
    width:34px;
    height:34px;
  }
  body.mp-public .mp-hero .ud-r12r5-accent svg {
    width:17px;
    height:17px;
  }
  body.mp-public .mp-hero .ud-r12r5-accent:first-child { right:31px; }
  body.mp-public .mp-hero .ud-r12r5-mobile-accents::before {
    right:64px;
    width:40px;
  }
  body.mp-public .mp-hero .ud-r12r5-mobile-accents::after {
    right:0;
    width:64px;
    height:40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.mp-public .mp-hero .ud-r12r5-accent,
  body.mp-public .mp-hero .ud-r12r5-mobile-accents::before,
  body.mp-public .mp-hero .ud-r12r5-mobile-accents::after {
    animation:none!important;
  }
}